Migrating from NextJs 12 `pages` router

[@joshtriedcoding]

The caching behaviour is one of the largest changes in how to write NextJS now and feel like it demands the most explanation of all new features. Thanks for sharing, great summary

[@hamedbahram]

Totally agree! Thanks for tuning in :)

[@frugodwill]

My main question is, if I have a page, that uses use client. So the main page component is a client component, how do i pre-fetch data in that?

[@hamedbahram]

@@frugodwill you can fetch your data in a server component and pass it to your client component as a prop.

[@frugodwill]

​@@hamedbahram Thanks for your reply Hamed! so basically all pages should be server components by default?

[@hamedbahram]

@@frugodwill yeah all pages are server components by default.

[@malsp5151]

Thank you for this excellent and detailed explanation which makes things much, much clearer than the official docs do. It is an increasingly complex area, but your cool and calm presentation with easy to understand examples was just what I needed, so it's helped me a great deal, and I'm sure it will help many others. Thanks again!

[@hamedbahram]

You're very welcome, Mark! I'm glad to hear you found it helpful.

[@alexavery8182]

Fantastc video All of Hamed's videos are great resources for learning Next.js

[@hamedbahram]

Appreciate that Alex!

[@syuo5051]

It was really helpful for solving my issue and for understanding for happening. I like your videos, your explanations there, how you show examples.Thank you, Hamed Bahram! 🥰

[@hamedbahram]

I'm glad you found the video helpful. I appreciate your comment ☺️ thanks.

[@azin7025]

خیلی خوب توضیح دادی. تشکر

[@hamedbahram]

Merc!

[@mat_0684]

Thank you for all the explanation! How would you migrate some global fetched data that was done with getServersideProps on all pages to the new model ?

[@hamedbahram]

You can fetch the data in any server component that needs it. Keep in mind that React deduplicates the request meaning that it won't fetch the same data twice in one render cycle. If you're not using the `fetch` API directly you can use the `cache` function from React to accomplish the same thing.

[@brgv_]

Hi Great tutorial. I'm facing an issue with static export. Where you use output: "export" in next.config file as per the documentation. Then if you build. The dynamic paths i.e todo/[id] will throw 404 Can you please share your thoughts on that? My requirement is to generate the out folder and then upload it to S3.

[@hamedbahram]

Incremental static regeneration (ISR) is not supported with a static export and that's why you're getting an error. With a static export there is no server to regenerate a page. You can read more about it here => nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features

[@brgv_]

@@hamedbahram thank you for replying. so what would the solution in this case according to you. Please guide. One fix I can think of is url parameter instead dynamic path.

[@hamedbahram]

@@brgv_ That has the same problem, url params are only known at runtime. The only solution is to rebuild and redeploy your site anytime there is a change in your data. Which is fine if you're site is a static site meaning that pages and data doesn't change that often.

[@brgv_]

@@hamedbahram Thank you for your response. no there will be dynamic data, listing, pagination, details page, curd features. With this issue app router is not good idea right?

[@hamedbahram]

@@brgv_ It has nothing to do with the `app` router. The `pages` router would be the same. If you require incremental static regeneration, or anything that needs a server, the `static export` won't work.

[@kikevanegazz325]

Sorry, I don’t get it. When you set the revalidate = 10 you had to refresh the page. Is that the default behaviour? I mean, won’t it refresh the html by itself? Does the user have to generate the request for the html?

[@hamedbahram]

With `revalidate = 10`, NextJs will regenerate the page after 10 seconds, so the next person visiting the page will see the new one, that's why I refreshed the page so simulate a new request. Does that answer your question?

[@kikevanegazz325]

@@hamedbahram Yes, it does. I wasn't quite getting the concept of chaching, and therefore not understanding the revalitdate functionality. I do now, thanks.

[@hamedbahram]

Anytime!

[@soklagenhet]

Extremly good, love that you do a lot of recap. Coming from next 12 to me this new API feels actually far more complex than the old one - I wonder how these new defaults affect usage on e.g Vercel, because it seems like some defaults would favour SSR a lot more which in turn would increase usage on vercel. Just a thought,.

[@hamedbahram]

Thank you Pythonic! The new App router and React server components are a totally different concept for building React apps and I agree coming from NextJs 12, it takes some time to wrap your head around it. The NextJs 13 defaults, though, are more favouring static generation and caching unless you use dynamic functions or force dynamic rendering.

[@ahrenwagner2993]

Hey Hamed! Thanks for your videos! I wanted to know if you've been able to address hydration errors when using reactQuery, specifically when youre having to mutate data?

[@hamedbahram]

Hey Ahren! Haven't come across that to be honest, I don't use client-side data fetching that often in the app router, and when I do I usually use SWR.

[@ahrenwagner2993]

@@hamedbahram Okay! I've since discovered it's an issue relating to Chakra implementation. No sure onanything more than that. It's got to the point it's serious enough to venture into Stack Overflow world :) Thanks again for your content! Hope you're doing well!

[@hamedbahram]

@@ahrenwagner2993 I see 🤔 yeah it might be that you need to wrap Chakra components in your own client component with the 'use client' directive up top.

[@krzysiekkucharski7]

What would be the difference between querying Mongo from API routes / from lib directory when using SSR page? Is using lib directory secure to use Mongo url?

[@hamedbahram]

Using the `lib` is just for organization purposes and doesn't protect your db functions. You have to make sure you're only calling your db functions from server actions marked with the `use server` directive, or from inside your API routes which run on the server. Does this answer your question?

[@krzysiekkucharski7]

@@hamedbahram Yes, thank you very much :)

[@hamedbahram]

@@krzysiekkucharski7 Anytime!

[@jeghaire]

Thank you for this video. Great work at breaking this concepts down. I now understand how to implement whatever option I want. However, when am I supposed to use a dynamically generated or static page? Take an ecommerce app for example

[@hamedbahram]

Thanks for your comment Jomavi. As for your question, if you don't need any dynamic value in the page the page should be static, for instance dynamic values can be `header`, `cookies`, or query strings. For an ecommerce example, your product and category pages can be static, and the search page for example can be dynamic where users can pass in different filters or sorting options as query strings.

[@jeghaire]

@@hamedbahram Thanks. I get it now

[@hamedbahram]

@@jeghaire Anytime!

[@ArtikMan1994]

So, revalidate const implements ISR feature as well as dynamic. AND dynamicParams (which by default is true) implements ISR feature for dynamic routes, because if we try to get route which wasn't cached as static page during build time,- we will request it. Am I right? Or the second case with dynamicParams(true) is not implementing ISR and Im wrong? Please explain to me. Thanks in advance!

[@hamedbahram]

The `dynamicParams` is used together with `generateStaticParams` and defines what should happen if a dynamic segment is requested but was not returned from `generateStaticParams` function. It defaults to `true` which means the page will be generated at request time. If you set it to `false` it'll show a 404.

[@adimardev1550]

awesome! good research & great explanation

[@hamedbahram]

Thank you, glad you liked it!

[@adimardev1550]

@@hamedbahram you're awesome!

[@raphaelaboohi2438]

Hey could you help me? i have watched your video and i am trying to create ssg with next js 13 app dir and i put cache: "force-cache", and I don't get new results on each build although my data in changing and I get the cached results. what am I doing wrong?

[@hamedbahram]

It'll be hard for me to guess what you're doing wrong without seeing your code. Are you using fetch?

[@raphaelaboohi2438]

@@hamedbahram yes

[@williamtanardi3952]

How do I fetch data to a client component page?

[@hamedbahram]

You can either fetch data server-side and pass it down to your client components as a prop, or you can use just fetch directly inside your client component like we do in regular NextJs (React) apps. You can also use libraries like `swr` or `react-query` to benefit from caching on the client.

[@codeorcode]

Hello sir , can you please make a video on on-demand revalidation using path and tags , with small demo application with real time example

[@hamedbahram]

Hey! you can watch this video where I use server actions and `revalidatePath` to update todos. kzbin.info/www/bejne/bpaWZpilaZlqkNk

[@hazemalsaqaan3925]

Great ❤❤

[@hamedbahram]

Appreciate your comment.

[@EbrahimAmr]

Great work

[@hamedbahram]

Thank you!

[@fazelpejmanfar]

thanks hamed jan

[@hamedbahram]

Thanks for tuning in Fazel jan!

[@shafqathussain7728]

Great Sir

[@hamedbahram]

Thanks Shafqat!

[@MSB_CLT]

when I'm try getTodo by fetch method with revalidate / it's not working in production . it's only work in dev mode

[@hamedbahram]

Look at my source code and see what you're doing differently. The link to the repo is the description.

[@blanchardkingolo1338]

Still awesome 👏

[@hamedbahram]

Thanks for tuning in!

[@alexcostal3749]

LOL First comment 😂😂😂😂😂

[@hamedbahram]

Thanks for tuning in Alex!

[@misterkilluminati6949]

Been digging docs for three days, didn't get to understand as much as I did with this video 🌹🌹

[@hamedbahram]

Very glad to hear that! Thanks for tuning in.

[@zoki5388]

Do you have any idea how to implement pagination for the following URL structure: /blog/[id]? Each [id] is generated with generateStaticParams. I would like /blog to act as the first page, displaying five posts, and then /blog/2 as the second page, displaying the next five posts. I have the pagination working, but I'm struggling with what to display on the /blog page.

[@hamedbahram]

You can default the id=1 if it's not present in the URL i.e. for `/blog`

[@zoki5388]

@@hamedbahram Hey Hamed thanks for replay, my question might be very silly but I've been struggling with this for many days. if I try to do that I get Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786) because /[id] page is async function because I'm trying to get list of posts. how I'm supposed to fetch data if I can't use async await? Any tips are welcome. It works with{ /* @ts-expect-error Server Component */ }

[@hamedbahram]

@@zoki5388 You cannot use `async` in client components. You should use a server component and access the dynamic segment from the `params` object: export default function Page({ params }) { const { id = 1 } = params return ... }