What is Next.js???

ひょんなことからNext.jsを学習しなければならなくなりました。

コピペで動くだろうと、たかをくくっていたところ、しっかりエラー連発したので、しっかり理解しよう。

The React Framework for the Web

Reactのフレームワーク。

Used by some of the world’s largest companies, Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

世界で最も大きな企業にも使われていて、最新のReactの機能を拡張して、フルスタックのWebアプリを作ることができる。

強力なRustベースのJSツールを統合して素早くビルドできる。

らしい。

Features

• Client and Server Rendering
• Nested Routing
• Data Fetching
• Built-in Optimizations
• TypeScript Support
• API Routes
• Middleware
• Node.js and Edge Runtimes
• CSS Support

Client and Server Rendering

Data fetching in Next.js allows you to render your content in different ways, depending on your application’s use case. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.

Data Fetchingで、アプリケーションのユースケースによって色々な方法でコンテンツをレンダリングできる。

• SSR: Server Side Rendering
• SSG: Static Site Generation
• CSR: Client Side Rendering
• ISR: Incremental Static Regeneration

それぞれでボリュームがあるので説明は割愛。

SWRは知っておいた方が良さそう。

Nested Routing

Next.js 13 introduced a new file-system based router built on top of React Server Components with support for layouts, nested routing, loading states, error handling, and more.

Next.js 13は、新しいファイルシステムベースルータを採用しており、レイアウトサポート、ネステッドルーティング、ロード状態、エラーハンドリングなどを提供している。

Terminology

• Tree: 階層構造全体
• Subtree: Treeの一部
• Root: Tree、Subtreeの最初のノード
• Leaf: 子を持たないノード

• URL Segment: スラッシュで区切られたURL Pathの一部
• URL Path: ドメインに続くURLの一部

The app Directory

The new router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior.

新しいルータは、appディレクトリで動作する。

appディレクトリは、pagesディレクトリと一緒に動作し、インクリメンタルに適用される。

これによって、いくつかのルートは新しいものに対応させて、pagesにある他のルートは以前のもののままにできる。

• Folders: ルートを定義する。
• Files: UIを作る。

appがRoot Segmentで、dashboard、settingsがセグメント。

上記のようにNested Routesが作れる。

File Conventions

• page.js: 固有のUI。
• route.js: サーバサイドAPIのエンドポイント。
• layout.js: セグメント共通のUI。
• template.js: layout.jsと似ていて、新しいコンポーネントがナビゲーション上にマウントされない。
• loading.js: ローディングUI。
• error.js: エラーUI。
• global-error.js: error.jsと似ていて、ルートのlayout.js、template.js、head.jsで発生したエラーをキャッチする。
• not-found.js: NotFoundUI。

上記以外もスタイルシートやテスト、他のコンポーネントなども配置可能。

Component Hierarchy

• layout.js
• template.js
• error.js
• loading.js
• not-found.js
• page.js

Data Fetching

※Client and Server Renderingと同じ。

Built-in Optimizations

The Next.js Image component, next/image, is an extension of the HTML element, evolved for the modern web. It includes a variety of built-in performance optimizations to help you achieve good Core Web Vitals. These scores are an important measurement of user experience on your website, and are factored into Google’s search rankings.

next/imageはimgタグのモダンWeb用に拡張されたもの。

• Improved Performance: デバイスサイズに最適化された画像をモダン画像フォーマットで送信
• Visual Stability: CLSを防ぐ
• Faster Page Loads: 画像のロードはビューポートに入ってから。
• Asset Flexibility: オンデマンドで画像のリサイズができ、リモートサーバに置くこともできる。

Dynamic await import() or require() are not supported. The import must be static so it can be analyzed at build time.

動的なawait import()やrequire()はサポートしていない。

@next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.

This new font system also 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 with the rest of your static assets. No requests are sent to Google by the browser.

@next/fontはあらゆるフォントファイルをセルフホスティングできる。

また、size-adjustプロパティによって、レイアウトシフトなしにWebフォントをロードできる。

Google Fontsも利用でき、静的アセットとしてセルフホスティングされるため、Googleにリクエストしない。

With Tailwind Css

$ npx create-next-app --example with-tailwindcss with-tailwindcss-app

TypeScript Support

Next.js provides an integrated TypeScript experience, including zero-configuration set up and built-in types for Pages, APIs, and more.

TypeScriptをサポートしている。

設定なしで利用可能。

API Routes

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won’t increase your client-side bundle size.

ページの代わりにAPIエンドポイントを扱える。

ただし、サーバサイドのみ利用可能。

Middleware

Middleware allows you to run code before a request is completed, then based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.

Middleware runs before cached content, so you can personalize static files and pages. Common examples of Middleware would be authentication, A/B testing, localized pages, bot protection, and more. Regarding localized pages, you can start with i18n routing and implement Middleware for more advanced use cases.

Middlewareを利用すると、リクエストが完了する前にコードを差し込むことができる。

事例としては、認証機能、A/Bテスト、ローカライズ、ボットプロテクションなど。

Node.js and Edge Runtimes

Edge Runtime

In Next.js, the lightweight Edge Runtime is a subset of available Node.js APIs.

The Edge Runtime is ideal if you need to deliver dynamic, personalized content at low latency with small, simple functions. The Edge Runtime’s speed comes from its minimal use of resources, but that can be limiting in many scenarios.

For example, code executed in the Edge Runtime on Vercel cannot exceed between 1 MB and 4 MB, this limit includes imported packages, fonts and files, and will vary depending on your deployment infrastructure.

Edge Runtimeは、Node.js APIのサブセット。

動的で、パーソナライズされたコンテンツをローレイテンシーで届けたい場合に理想的。

ただし、多くの場合で制限がありそう。

Node.js Runtime

Using the Node.js runtime gives you access to all Node.js APIs, and all npm packages that rely on them. However, it’s not as fast to start up as routes using the Edge runtime.

Deploying your Next.js application to a Node.js server will require managing, scaling, and configuring your infrastructure. Alternatively, you can consider deploying your Next.js application to a serverless platform like Vercel, which will handle this for you.

全てのNode.js APIを利用できるが、Edgeよりは立ち上がりが悪い。

デプロイも自身のインフラに載せる必要があり、面倒。

Vercelのようなサーバレスプラットフォームに乗せることで楽になる。

Serverless Node.js

Serverless is ideal if you need a scalable solution that can handle more complex computational loads than the Edge Runtime. With Serverless Functions on Vercel, for example, your overall code size is 50MB including imported packages, fonts, and files.

The downside compared to routes using the Edge is that it can take hundreds of milliseconds for Serverless Functions to boot up before they begin processing requests. Depending on the amount of traffic your site recieves, this could be a frequent occurrance as the functions are not frequently “warm”.

Edgeより複雑で処理が多い場合は理想的。

Vercelのサーバレスファンクションを使うと、コードサイズが50MBまで含められる。

Edgeと比べた場合のデメリットは、ファンクションの立ち上げに数百ミリ秒かかってしまうこと。トラフィック量にもよるが、warm状態でない場合は頻繁に発生しうる。

CSS Support

Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript.

JSからCSSをインポートすることができる。

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

styles.cssをインポートすることで全てのページに適用させることができる。

Adding Component-Level CSS

*.module.cssによってコンポーネントレベルのCSSをインポートできる。

Sass Support

// next.config.js
const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Learn

Next.jsをステップバイステップで学習できる。

まとめ

とりあえず、Next.jsの概要は把握できた。

ベータ版ではあるが、appディレクトリを利用したサーバサイドレンダリングは色々と良さそう。

ディレクトリ構成と規約を理解して、次はLearnをやっていこう。