Notes on NextJS App Router Course

I recently finished NextJS's new free course to learn about the new app router. Here are my notes from going through this course:

• usePathname() makes it very easy to add the "Active Link" feature to your codebase. This hook returns the current pathname that you can match with the link's location to find active links.

• Caching in the app router works quite differently. The new router is very aggressive on caching components. If you want to mark a data function to be dynamic every time, add noStore() call to your function.

  • This indicates NextJS to ignore caching on the output of a particular function.

  • This makes it very easy to differentiate components between Dynamic & static, at the data fetching level!

  • You can also use export const dynamic = "force-dynamic" to mark a page segment to be dynamic.

• Route groups allow you to organize files into logical groups, without affecting the URL. So /dashboard/(overview)/page.tsx becomes /dashboard.

• Suspense Boundaries

  • Where you place your Suspense boundaries will depend on a few things:

    • How you want the user to experience the page as it streams.

    • What content do you want to prioritize?

    • If the components rely on data fetching.

  • It's good practice to move your data fetches down to the components that need it, and then wrap those components in Suspense.

  • This is where we need a mind shift from the older pages model. Instead of fetching data at the page level, fetch data at the component level!

• Partial rendering allows to split components into dynamic & static.

  • This is different from than pages router where the whole page used to be either dynamic or static.

  • Suspense in your app is used as a boundary between dynamic and static components.

  • It requires no code change. As long as you are wrapping your dynamic components using Suspense, NextJS can identify boundaries for dynamic and static components in your app.

• With URL search params and defaultValue attribute for inputs, you can eliminate the need for controlled components most of the time.

• Handling IDs with Server Actions

  • When you have to send IDs to your server actions (ex. sending folder ID to server action to delete a folder), you should be binding it to server action, instead of passing it as plain argument.

    • This ensures that the ID passed the server actions is encoded. This is recommended over hidden inputs in your codebase.

• I had no idea that the ErrorBoundary component receives a very useful reset function! This will allow users to try fixing the error boundary.

  • The notFound boundary takes precedence over the error boundary. This allows control to handle more specific errors.

• ESLint Accessibility Plugin: https://www.npmjs.com/package/eslint-plugin-jsx-a11y

• The app router has some special file naming conventions for the root folder. Like, favicon.ico, robots.txt, sitemap.xml, etc.