HackMD
[Survey] NextJs
v13 and up
:mag_right: Font
:bulb: Import google font from NextJs itself instead of css
:small_blue_diamond: Before
:small_blue_diamond: After
:mag_right: Routing
:small_blue_diamond: Page routing
:small_blue_diamond: App routing
In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.[1]
The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption.
:bulb: Use App Router instead of Pages Router: The App Router takes priority over the Pages Router. Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict.[1:1]
:small_blue_diamond: App routing tree
By default, components inside app are React Server Components. This is a performance optimization and allows you to easily adopt them, and you can also use Client Components.
:small_blue_diamond: use client
If encounter bellow error, then add 'use client' at the top of component file.
Why?
To use Client Components, you can add the React use client directive at the top of a file, above your imports.
use client is used to declare a boundary between a Server and Client Component modules. This means that by defining a use client in a file, all other modules imported into it, including child components, are considered part of the client bundle.
However, use client doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.[2]
:small_blue_diamond: Route Groups
:information_source: A route group can be created by wrapping a folder's name in parenthesis: (folderName)
To create multiple root layouts, remove the top-level layout.js file, and add a layout.js file inside each route groups. This is useful for partitioning an application into sections that have a completely different UI or experience. The <html> and <body> tags need to be added to each root layout.
In the example above, both (app1) and app2 have their own root layout.
:no_entry: app2 could not be route group: Routes that include a route group should not resolve to the same URL path as other routes. For example, since route groups don't affect URL structure, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error.
:vertical_traffic_light: If you use multiple root layouts without a top-level layout.js file, your home page.js file should be defined in one of the route groups, For example: app/(marketing)/page.js.[3]
