Advanced NextJS Features

• Guide covers lesser-known features of NextJS for developers familiar with both pages and app router.

Opt-in to Automatic Typescript Checks

• Enable typedRoutes in next.config.js to generate a .d.ts types file in .next/types.
• This allows Typescript to validate href values within your routes and prevent typos in components.
• Non-literal strings, like dynamically created strings (e.g., /blog/${slug}), require casting as Route.

Official NextJS Packages for Google Third-Party Scripts

• @next/third-parties/google package provides official components for Google services.
• GoogleTagManager: Instantiates a Google Tag Manager container.
• GoogleAnalytics: Sets up Google Analytics.
• GoogleMapsEmbed: Lazy loads a Google Maps instance.
• YouTubeEmbed: Loads a YouTube embed using the lite-youtube-embed package.

Recommendation for Committing .env to Repository

• NextJS documentation suggests including .env, .env.development, and .env.production in your repository to define defaults.
• .env*.local files should be in .gitignore for storing secrets.

Sitemap.xml Generation

• Create a sitemap.ts file in the app directory to generate an array of URLs for your sitemap.xml file.
• The function can asynchronously load data from an API or database to dynamically populate the sitemap.

unstable_cache (App Router)

• unstable_cache can cache data, like database queries, for use across multiple requests.
• Despite being unstable, it generally functions as expected, though its implementation may evolve in future NextJS versions.

Improve CI Build Cache

• Next.js uses the .next/cache directory to store cached data between builds.
• Configure your CI provider to cache this directory for faster build times.
• Vercel handles this automatically.

Get User Geolocation (Vercel)

• Vercel automatically includes geolocation data in the NextRequest object.
• Access user's city, country, region, latitude, and longitude through request.geo.*.
• Get the user's IP address using request.ip on Vercel or request.headers.get('X-Forwarded-For') on other servers.

Remove JSX Properties

• babel-plugin-react-remove-properties removes JSX properties like data-testid.
• Configure the plugin in next.config.js to remove specific properties by regex.

Dynamic Loader

• next/dynamic combines React.lazy() and for dynamic component loading.
• It defers loading a component's code until it's first rendered and allows specifying a fallback component.
• Also loads other scripts/files on demand

Fast Refresh (Hot Reloading)

• "Fast refresh" is the near-instant reloading of components without losing state during file edits.
• Editing a file with React components updates only that file and re-renders the component.
• Editing a file with non-React component exports re-runs that file and files importing it.
• Editing a file imported by non-React files triggers a full reload.
• Use // @refresh reset to force a full reload.

instrumentation.ts

• instrumentation.ts in the root or src directory executes a register function when the NextJS server starts.
• Use it for initializing external code required for your application.

Type Check next.config.js

• Add // @ts-check at the top of next.config.js to enable Typescript type checking in your IDE.

Middleware waitUntil and NextFetchEvent (App Router)

• In middleware, use event.waitUntil to run code in the background.

Multiline .env Variables

• Can have multiline value with escaped new lines.

Route Segment Configuration

• Exporting variables from page.tsx, layout.tsx, or route.ts in the App Router configures the route.
• Configurable values include dynamic, dynamicParams, revalidate, fetchCache, runtime, preferredRegion, and maxDuration.
• Values must be static.

generateViewport in Server Components (App Router)

• Use generateViewport in server components to set meta tags like themeColor.

User Agent Information with isBot

• Import userAgent from next/server to get information about the user agent.
• isBot boolean indicates if the request is from a known bot.
• The device object provides device details (model, type, vendor).

next.config.js Phase

• Use the phase parameter in next.config.js to return different configurations for different contexts (development, server, build, testing.

Debugging Builds

• Run next build --debug to build in debug mode.
• Run next build --profile to build in profile mode.
• next info prints local platform information.

Global Error Page (App Router)

• Use app/global-error.ts to catch errors thrown in the root app/layout.js or app/template.js component, wrapping the entire application.
• app/error.ts does not catch errors thrown in the root app/layout.js or app/template.js component.
• app/global-error.ts requires including and `.

Metadata API (App Router)

• Use the Metadata API to set meta tags or title tag when using the app router.
• Use static metadata or dynamic metadata.

Boolean Options

• Has boolean props which change the behavior of the component

Replace Option on Link Component

• Set replace={true} on the component to replace the current history state instead of adding a new URL.

Scroll Option on Link Component

• The scroll boolean prop on prevents scrolling to the top of the page on navigation.

Prefetching

• The prefetch boolean on (enabled by default) prefetches the link's URL in the background.

Configure Browserlist for Polyfills

• Configure browserslist in package.json to override default browser versions for polyfilling.

Custom Next.js Server

• Set up a custom Next.js server for complex application requirements.
• Integrate Next.js rendering logic into an Express app.

Multi Zones (Multiple Next.JS Application Deployments)

• Split a large app into separate apps with their own deployments using rewrites in next.config.js.
• Set basePath in the child application's next.config.js.

Return 404 or Redirect from getServerSideProps() (Pages Router)

• Return { notFound: true } from getServerSideProps to return a 404.
• Return a redirect object to force a redirect.