-
Anything inside app directory is by default
server component
. Only if our component requires some event handling, state management/lifecycle methods, hooks or browser APIs we use client component by explicitly specifying it as so. -
There are some reserved components for each route inside app.
- layout - UI shared b/w all routes inside this route.
- head - allows to configure head tag(meta and title).
- page - page(UI) of that Route.
- loading - A loading file can create instant loading states built on React Suspense.
- error - An error file defines an error boundary for a route segment.
getServerSideProps
andgetStaticProps
are now removed. We directly call the API in component itself and then specify in cache property of fetch API if rendering is static or dynamic.force-cache
is static(default) andno-store
is dynamic.- If we want use non-fetch library or ODM etc, we can specify rendering behavior
export const dynamic = 'auto' // 'auto' | 'force-dynamic' | 'error' | 'force-static'
- Create folder with the following convention -
[slug].tsx
. getStaticPaths
is replaced withgenerateStaticParams
which returns possible paths in the following format: [{slug:"1"},{slug:"2"},...].- Instead of fallback, we use following :
export const dynamicParams = true; //or false