10 Next.js Tips You Might Not Know!

Next.js 9.5 added redirects for sending requests to another path or website, with path and wildcard matching. Robinson uses leerob.io/youtube as an example of an external redirect. Rewrites proxy requests to another destination while keeping the original URL visible, which can help when incrementally moving a site to Next.js.

Preview mode lets editors view draft content from a headless CMS on a statically generated site through a unique preview URL. Robinson also shows how to hook a Node script into the build process to generate a sitemap, RSS feed, or search index.

Robinson describes swapping React for Preact in the client production build to reduce shipped JavaScript, while cautioning that compatibility with newer React features may vary. He also recommends absolute imports and module aliases configured in jsconfig.json or a TypeScript config to simplify import paths.

A single Next.js API route can handle different HTTP methods: his views example increments a count on POST and returns it on GET. He also demonstrates setting Cache-Control headers, which can let a client receive a 304 not modified response. Page components can expose title and description properties for a shared layout in _app.js.

Robinson highlights Capacitor.js, created by Ionic's creator, as a way to build mobile-like experiences with Next.js. The example combines Next.js and Tailwind and includes hot module reloading, modals, swipe-to-close, and virtual lists.