Static Export for App Router

Static Export for App Router

The Next.js App Router now supports fully static exports.

You can start as a static site or Single-Page Application (SPA), then later optionally upgrade to use Next.js features that require a server.

When running next build, Next.js generates an HTML file per route. By breaking a strict SPA into individual HTML files, Next.js can avoid loading unnecessary JavaScript code on the client-side, reducing the bundle size and enabling faster page loads.

Static Export works with the app router's new features including static Route Handlers, Open Graph images, and React Server Components.

For example, Server Components will run during the build, similar to traditional static-site generation, rendering the components into static HTML for the initial page load and a static payload for client navigation between routes.

Other Improvements child

Previously, to use Static Export in the pages directory, you needed to run next export. However, with the next.config.js option, next build will output a out directory when output: 'export' is set. You can use the same configuration for the app router and pages directory. This means next export is no longer required.

With advanced static export support, you'll get errors earlier in the development process (next dev), such as when attempting to use a dynamic function that requires a server like cookies() or headers().

Learn more about Static Export.

Parallel Routes and Interception

Next.js 13.3 introduces new dynamic conventions that allow you to implement advanced routing cases: Parallel Routes and Intercepting Routes. These features enable you to show more than one page in the same view, like with complex dashboards or modals.

With Parallel Routes, you can simultaneously render one or more pages in the same view that can be navigated independently. It can also be used to conditionally render pages.

In the example above, clicking the photo from the user's profile will open the photo in a modal during client-side navigation. However, refreshing or sharing the page will load the photo with its default layout.

Parallel routes and interception enable Instagram-like modal routing.

Parallel routes and interception enable Instagram-like modal routing.

This solves the challenges you may have when creating modals, such as making the modal content shareable through an URL, preventing context from being lost when the page is refreshed, and closing and reopening the modal with backward and forward navigation.

For more examples and behavior, see the Parallel and Intercepting Routes documentation.

Other Improvements

Parallel routes and interception enable Instagram-like modal routing.
  • Design Updates: The Next.js homepage and showcase have been refreshed with a new design.
  • Turbopack: Added support for Middleware, all next/font options, and streaming with Server Components as it approaches beta (see demo). We've also patched additional bugs discovered while dogfooding on mature Next.js apps like vercel.com and nextjs.org. Learn more.
  • Fast Refresh for next.config.js: Making changes to next.config.js will now automatically restart your local dev server. This extends automatic reloading of .env, .env.*, jsconfig.json, tsconfig.json configuration files.
  • Accessibility: The App Router now includes the route annoucement from pages. This feature announces client-side route transitions to screen readers and other assistive technology. Learn more.
  • Statically Typed Links: redirects and rewrites set in next.config.js are now considered during type checking. Learn more.
  • Tailwind CSS for create-next-app: When starting a new project with npx create-next-app@latest, you can now optionally select Tailwind CSS, or use the --tailwind flag, to preconfigure your application with this styling solution.
  • Route Handlers: Using export default instead of a supported HTTP verb now throws a helpful error with route.ts. Learn more about Route Handlers.
  • Images: next/image now supports the fetchPriority="high" attribute.
  • Metadata: The previous API for metadata (head.js), which was deprecated in 13.2, has been removed. Instead, use the built-in support for SEO through the Metadata API.
  • Opt folders out of routing: Prefix a folder with _ to opt it and any child segments out of routing. For example, app/_dashboard/page.tsx would not be routable.
  • App Router: We've added a new useParams client component hook to read the dynamic parameters for the given route segment. Learn more.
  • Improved Stylesheet Loading: Next.js now implements React’s Suspensey CSS which fixes many issues around CSS loading and flashes of unstyled content, particularly during navigation.
  • Improved Not Found handling: In addition to catching expected notFound() errors, the root app/not-found.js file will also handle any unmatched URLs for your whole application. This means users that visit a URL that is not handled by your app will be shown the UI exported by the app/not-found.js file. Learn more.
  • Improved client-side router cache: router.refresh() will now invalidate the entire cache and search params are now part of the cache key allowing navigation between two search params (e.g. /?search=leerob and /?search=tim) to correctly restore content that relied on the param.
comment