/app
This template fully uses the new /app-directory. This completely replaces the previous /pages-directory, even for API-routes.
It uses a predefined wording for file names, such as page.tsx for a page orlayout.tsx for a new layout component.
Server
Components
React Server Components are a new way to build applications that leverage the power of server-side rendering, without losing the flexibility of client-side code.
They enable non-blocking, streaming rendering of components at the start of a request, while the rest of the page loads in the background. This means that users can see the first parts of a page immediately, and then the rest of the page loads in as it becomes available. A great example of how to use them are layout.tsxfiles.
API via
routes.tsx
This template uses a new way to define API-routes. Instead of defining them in pages/api, you can define them in routes.tsx. Next.js 13 makes it simpler to define the HTTP-method by exporting the respective function. For example, a GET-handler in a routes.tsx file is just an exported function named GET.
These new API-handlers can also be static or dynamic. Only dynamic API-routes have access to a request object. The usage is similar to getStaticProps for static routes andgetServerSideProps for dynamic routes. You can see an example in theapp/api/(static|dynamic)/routes.tsx file of this template.
Metadata
Next.js 13 introduces a new way to define metadata for pages. You can define metadata for a page by exporting either a metadata object or a generateMetadata function from your page.tsx.
This new API replaces the usage of NextSeo for most head-elements. You can still use NextSeo for JSON+LD and other SEO-related tags.
next/font
This templates also demonstrates how to use the new next/font module for loading fonts. It is a simple way to load fonts locally or from Google Fonts.
It provides a simple and efficient way to load fonts, without requiring any additional configuration.
Turbopack
Next.js 13 introduces a new way to bundle your application by using a new bundler called Turbopack, written by the Next.js team.
As of writing, Turbopack is marked as an alpha-feature. This template already uses it for bundling all code, together withTailwindCSS.