Technical Insights
Next.js
- useSearchParams is out of favour if you want your pages to be rendered on the server.
- If you want it to work in a component, you have to wrap it in a
Suspense component.
- This means that if you want to use this hook on a page, you’d have to put the
Suspense in your RootLayout
- Instead, it’s best to use
use and engage with Next’s default params and searchParams props that are passed to every page.
Example:
build: set up pwa manifest · crevulus/digital-literacy-art-education@d022faf
Relevant docs:
https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
https://nextjs.org/docs/app/api-reference/file-conventions/page#reading-searchparams-and-params-in-client-components
- Insert Metadata and Viewport type objects in layout.tsx instead of using
<head> tags.
- Prior to app-router,
_document file with Head component containing metadata and link tags was necessary.
- Replaced by objects automagically picked up by Next
- Docs say to add
themeColor in metadata object, but that caused a warning on build: Unsupported metadata themeColor is configured in metadata export.
- Use
viewport object instead.
- icon for
apple-icon needs to go in /app, as does favicon.
Relevant docs:
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png
https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
- Insert “islands of interactivity” in server-rendered pages in order to keep parts of the UI static and others dynamic (client-side).
- Can use a mix of server actions and client-side code.
Example:
feat: use server action to create new grid · crevulus/collaborart@924a96b
Relevant docs: