iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
➡️

Next.js 13 Japanese Translation

に公開
Next.js
React
tech

https://nextjs.org/blog/next-13

I've translated this loosely.
Please note that it contains many liberal translations.

  • app/ Directory (beta): Easier, faster, and smaller client-side JS size.
    • Layouts
    • React Server Components
    • Streaming
  • Turbopack (alpha): Up to 700x faster Webpack replacement bundler implemented in Rust.
  • New next/image (stable): Faster by utilizing native browser lazy loading.
  • New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
  • Improved next/link: Simplified the API and made it automatically display <a> tags.

You can update using the following command:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

app/ Directory (beta)

One of the most loved features in Next.js is the file-system based router. By placing files in a folder, you can instantly create routes within your application. No configuration is required.

Today, we are introducing the app/ directory (beta), which improves routing and layouts in Next.js.
This reflects community feedback on the previously released Layouts RFC.
This includes support for the following:

  • Layouts: Easily share UI while maintaining state and avoiding re-renders.
  • Server Components: Making server-first the default for dynamic applications.
  • Streaming: Displaying loading states instantly and streaming updates.
  • Suspense for Data Fetching: The new use hook enables component-level fetching.

The app/ directory can coexist with the existing pages directory for incremental adoption. You don't need to use the app/ directory when upgrading to Next.js 13, but it allows you to build a foundation for building complex interfaces while delivering smaller JavaScript.


The app/ directory can be adopted incrementally from the existing pages/ directory.

Layouts

Using the app/ directory makes it easy to create complex interfaces that maintain state across navigation, avoid expensive re-renders, and enable advanced routing patterns. Furthermore, you can now colocate your application code with your routes, such as components, tests, and styles.

To create a route within app/, you need a single file called page.js.

app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Additionally, you can now define layouts through the file system. Layouts share UI across multiple pages. During navigation, layouts maintain their state, remain interactive, and do not re-render.

app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

Learn more about Layouts and Pages here, and you can try a sample deployment here.

Server Components

The app/ directory introduces support for React's new Server Components architecture. Server Components allow you to use the server and client for what they are each best at, enabling you to build fast, highly interactive apps with a single programming model and providing a great development experience.

Additionally, by using Server Components, you can reduce the amount of JavaScript sent to the client and speed up the initial page load.

When a route is loaded, the Next.js and React runtimes—which are cacheable and predictable in size—are loaded. This runtime does not increase in size as your application grows. Furthermore, the runtime is loaded asynchronously, allowing the HTML from the server to be progressively enhanced on the client.

Learn more about Server Components here, and you can try a sample deployment here.

Streaming

The app/ directory introduces the ability to progressively render UI and incrementally stream rendered units to the client.

Using Server Components and nested layouts in Next.js, you can instantly render parts of the page that don't specifically require data, and display loading states for parts of the page that are fetching data. With this approach, users can start interacting with the page without waiting for the entire page to load.


The app/ directory supports Instant Loading UI via a dedicated loading.js file using React Suspense.

When deployed to Vercel, Next.js 13 applications using the app/ directory will stream responses by default on both Node.js and Edge runtimes to improve performance.

Learn more about Streaming here, and you can try a sample deployment here.

Data Fetching

The app/ directory is built on React Suspense and introduces powerful new ways to fetch data. This new use hook replaces previous Next.js APIs like getStaticProps and getServerSideProps and aligns with the future of React.

app/page.js
import { use } from 'react';

async function getData() {
  const res = await fetch('...');
  const name: string = await res.json();
  return name;
}

export default function Page() {
  // This value is fully typed
  // The return value is not serialized.
  // You can return Date, Map, Set, etc.
  const name = use(getData());

  return '...';
}

There is now one flexible way to fetch, cache, and revalidate data at the component level. This means all the benefits of Static Site Generation (SSG), Server-Side Rendering (SSR), and Incremental Static Regeneration (ISR) are now available through the React use hook and by extending the Web fetch API.

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default. You can also omit it.
fetch(URL, { cache: 'force-cache' });

// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });

// This request should be cached with a 10-second lifetime.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

In the app/ directory, you can fetch data within layouts, pages, and components, and it also supports streaming responses from the server.

You can significantly reduce the size of the JavaScript delivered by default while maintaining a rich, interactive client-side experience. Even as the number of Server Components in your application grows, the required client-side JavaScript size remains constant.

The app/ directory provides ergonomic ways to handle loading and error states and enables streaming of the UI during rendering. In future releases, we also plan to improve and simplify data mutations.


In the app/ directory, by using the new dedicated loading.js file, you can automatically create Instant Loading UI with Suspense boundaries.

We are excited to build for this new era of React and Next.js alongside the open-source community, package maintainers, and other companies contributing to the React ecosystem. The ability to colocate data fetching within components and the ability to reduce JavaScript distribution to the client were two key pieces of community feedback, and we are thrilled to add the app/ directory.

Learn more about Data Fetching here, and you can try a sample deployment here.

Introducing Turbopack (alpha)

Next.js 13 includes Turbopack, a new Rust-based successor to Webpack.

While Webpack has been downloaded over 3 billion times and is an essential part of building the web, we have reached the performance limits of JavaScript-based tooling.

In Next.js 12, we began transitioning to native Rust-based tooling. We started by migrating from Babel, resulting in 17x faster transpilation. Next, we replaced Terser, resulting in 6x faster minification. Now, it's time to bring native performance to bundling.

Using Turbopack alpha with Next.js 13 results in:

  • 700x faster updates than Webpack.
  • 10x faster updates than Vite.
  • 4x faster cold starts than Webpack.


Turbopack is a Rust-based successor to Webpack that speeds up HMR for large applications by 700x.

Turbopack bundles only the minimum assets required for development, resulting in incredibly fast startup times. For an application with 3,000 modules, Turbopack starts in 1.8 seconds. Vite takes 11.4 seconds, and Webpack takes 16.5 seconds.

Turbopack supports Server Components, TypeScript, JSX, CSS, and more out of the box. In the alpha version, many features are not yet supported. We look forward to hearing your feedback on using Turbopack to speed up local iterations.

Try the Turbopack alpha in Next.js 13 today using next dev --turbo.

next/image

Next.js 13 introduces a powerful new Image component, making it easy to display images without layout shifts and optimizing files on-demand for improved performance.

In a Next.js Community poll, 70% of respondents said they use the Next.js Image component in production and have seen improved Core Web Vitals. With Next.js 13, we are further improving next/image.

Key features of the new Image component:

  • Reduced client-side JavaScript.
  • Easier styling and configuration.
  • Improved accessibility by requiring alt tags by default.
  • Better alignment with the web platform.
  • Faster performance because native browser lazy loading doesn't require hydration.
import Image from 'next/image';
import avatar from './lee.png';

function Home() {
  // Required "alt" for improved accessibility.
  // optional: Image files can be placed within the app/ directory.
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

Learn more about the Image component here, and you can try a sample deployment here.

Upgrading next/image to Next.js 13

The old Image component has been renamed to next/legacy/image. We are providing a codemod to automatically update existing usages of next/image to next/legacy/image. For example, running this command from the root will run the codemod on your ./pages directory:

npx @next/codemod next-image-to-legacy-image ./pages

Learn more about the codemod here, and check the documentation here.

@next/font

Next.js 13 introduces a brand new font system:

  • Automatic font optimization, including custom fonts
  • Improved privacy and performance by removing external network requests
  • Built-in automatic self-hosting for any font file
  • Zero layout shift automatically using the CSS size-adjust property

This new font system allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted alongside the rest of your static assets. No requests are sent to Google by the browser.

import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>

It also supports custom fonts, including automatic self-hosting, caching, and preloading of font files.

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

You can customize every part of font loading, including font display, preloading, fallbacks, and more, while ensuring great performance and preventing layout shifts.

Learn more about the new Font component here, and you can try a sample deployment here.

next/link

In next/link, you no longer need to manually add <a> tags.

This was added as an experimental option in 12.2 and is now the default. In Next.js 13, <Link> always renders an <a> tag and can forward props to the underlying tag. For example:

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

Learn more about the improved Link component here, and you can try a sample deployment here

To upgrade your Link components to Next.js 13, we are providing a codemod to automatically update your codebase. For example, running this command from the root will run the codemod on your ./pages directory:

npx @next/codemod new-link ./pages

Learn more about the codemod here, and check the documentation here.

OG Image Generation

Social cards, also known as Open Graph images, can significantly increase engagement from content clicks, with experiments showing up to a 40% increase in conversion rates.

Static social cards are time-consuming, error-prone, and difficult to maintain. As a result, they are often omitted. Until now, dynamic social cards that need to be personalized and computed on the fly were difficult and expensive.

We have created a new library @vercel/og that works seamlessly with Next.js to generate dynamic social cards.

pages/api/og.jsx
import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    ),
  );
}

This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML and CSS into images, while leveraging React component abstractions.

Learn more about OG Image Generation here, and you can try a sample deployment here.

Middleware API Updates

In Next.js 12, we introduced Middleware to enable full flexibility in the Next.js router. We’ve heard your feedback on the initial API design and have added some additions to improve the developer experience and add powerful new features.

You can now set headers on the request more easily:

middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Clone the request headers and set a new header `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');

  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });

  // Set a new response header `x-version`
  response.headers.set('x-version', '13');
  return response;
}

Additionally, you can now provide a response directly from Middleware without having to rewrite or redirect.

middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';

// Limit the middleware to paths starting with `/api/`
export const config = {
  matcher: '/api/:function*',
};

export function middleware(request: NextRequest) {
  // Call our authentication function to check the request
  if (!isAuthenticated(request)) {
    // Respond with JSON indicating an error message
    return NextResponse.json(
      {
        success: false,
        message: 'Auth failed',
      },
      {
        status: 401,
      },
    );
  }
}

Sending a response from Middleware currently requires the experimental.allowMiddlewareResponseBody configuration option inside next.config.js.

Breaking Changes

  • The minimum version of React has been increased from 17.0.2 to 18.2.0.
  • The minimum version of Node.js has been changed from 12.22.0 to 14.0.0, as 12.x has reached its end-of-life (PR).
  • The swcMinify configuration property has been changed from false to true. See the Next.js Compiler for more details.
  • next/image has been renamed to next/legacy/image. next/future/image has been renamed to next/image. A codemod is available to safely and automatically rename imports.
  • next/link no longer requires an <a> tag as a child. Add the legacyBehavior prop to use the legacy behavior, or remove the <a> tag to upgrade. A codemod is available for automatic upgrades.
  • Routes are no longer prefetched when the User-Agent is a bot.
  • The deprecated target option in next.config.js has been removed.
  • Supported browsers have changed to target modern browsers, dropping support for Internet Explorer. You can still modify the target browsers using Browserslist.
    • Chrome 64+
    • Edge 79+
    • Firefox 67+
    • Opera 51+
    • Safari 12+

For more information, please see the Upgrade Guide.

Community

Six years ago, we publicly released Next.js. We aimed to build a zero-configuration React framework that simplifies the developer experience. Looking back, it's incredible to see how the community has grown and what we've been able to ship together. Let's keep it going.

Next.js is the result of a collaborative effort by over 2,400 individual developers, industry partners like Google and Meta, and our core team. With over 3 million npm downloads per week and 94,000 GitHub stars, Next.js has become one of the most popular ways to build for the web.

This release was made possible by the contributions of:
@ijjk, @huozhi, @HaNdTriX, @iKethavel, @timneutkens, @shuding, @rishabhpoddar, @hanneslund, @balazsorban44, @anthonyshew, @TomerAberbach, @philippbosch, @styfle, @mauriciomutte, @hayitsdavid, @abdennor, @Kikobeats, @cjdunteman, @Mr-Afonso, @kdy1, @jaril, @abdallah-nour, @North15, @feedthejim, @brunocrosier, @Schniz, @sedlukha, @hashlash, @Ethan-Arrowood, @fireairforce, @migueloller, @leerob, @janicklas-ralph, @Trystanr, @atilafassina, @nramkissoon, @kasperadk, @valcosmos, @henriqueholtz, @nip10, @jesstelford, @lorensr, @AviAvinav, @SukkaW, @jaycedotbin, @saurabhburade, @notrab, @kwonoj, @sanruiz, @angeloashmore, @falsepopsky, @fmontes, @Gebov, @UltiRequiem, @p13lgst, @Simek, @mrkldshv, @thomasballinger, @kyliau, @AdarshKonchady, @endymion1818, @pedro757, @perkinsjr, @gnoff, @jridgewell, @silvioprog, @mabels, @nialexsan, @feugy, @jackromo888, @crazyurus, @EarlGeorge, @MariaSolOs, @lforst, @maximbaz, @maxam2017, @teobler, @Nutlope, @sunwoo0706, @WestonThayer, @Brooooooklyn, @Nsttt, @charlypoly, @aprendendofelipe, @sviridoff, @jackton1, @nuta, @Rpaudel379, @marcialca, @MarDi66, @ismaelrumzan, @javivelasco, @eltociear, and @hiro0218.

Discussion