リリース・改善中
Framework · 2016年公開
Next.jsは、ファイルベースのルーティング、サーバーレンダリング、Server Components、組み込みの最適化を備えたReactフレームワークで、Webサイトからフルスタックアプリまで構築できます。
Next.jsはVercelが開発するオープンソースのReactフレームワークで、2016年に初めて公開されました。React単体では自分で選んで組み合わせる必要があるルーティング、サーバーレンダリング、静的生成、データ取得、ビルドツールをひとまとめに提供します。推奨されているApp RouterはReact Server Componentsを土台としており、appディレクトリのフォルダー構成がそのままURLになり、サーバーのコードとクライアントのコードを一つのプロジェクトの中で並べて書けます。
Next.jsは、パフォーマンスと検索エンジンでの見つけやすさの両方が重要な場面で力を発揮し、企業サイト、ブログやドキュメントサイト、ECサイト、SaaSのダッシュボードなどで広く使われています。ルートごとにビルド時に事前レンダリングするか、リクエストごとにレンダリングするかを選べ、時間のかかる部分はストリーミングで順次送れます。Server ActionsとRoute HandlersでフォームやAPIも扱えるため、画面とそれを支えるバックエンドを一つのコードベースで管理できます。画像・フォント・スクリプトの最適化も標準で備えています。
始めるには、Node.jsをインストールしてcreate-next-appでプロジェクトを作成し、公式ドキュメントのGetting Startedと無料コースのLearn Next.jsを順に進めるのがおすすめです。Reactのコンポーネント、props、フックを理解しているとずっと楽になるので、Reactが初めてならまずその基礎から学びましょう。TypeScriptは追加設定なしで使え、新しいプロジェクトでの利用が推奨されています。
appディレクトリ内のフォルダーと、page、layout、loading、errorといった特別なファイルで、URL、入れ子のレイアウト、読み込み中の表示、エラー画面を定義します。
コンポーネントは既定でサーバー上でレンダリングされ、ブラウザーにJavaScriptを送りません。"use client"を付けた部分だけがブラウザーで実行されます。
ルートごとに静的生成、リクエスト時のレンダリング、ストリーミングを組み合わせ、キャッシュと再検証でコンテンツを最新に保ちます。
画像・フォント・スクリプト用コンポーネント、自動コード分割、リンクのプリフェッチ、Turbopackにより、高速なビルドと画面更新を実現します。
nodejs.orgからNode.jsのLTS版をインストールし、ターミナルでバージョンを確認します。npmが同梱されており、pnpm、Yarn、Bunも使えます。
node --versioncreate-next-appで新しいプロジェクトを作成します。推奨の既定値を選ぶと、TypeScript、ESLint、Tailwind CSS、App Routerが設定されます。
npx create-next-app@latest my-appプロジェクトのフォルダーに移動して開発サーバーを起動し、ブラウザーでhttp://localhost:3000を開きます。ファイルを保存するとすぐに画面が更新されます。
cd my-app && npm run devApp Routerでは、app/page.tsxがトップページ(/)です。デフォルトエクスポートしたReactコンポーネントがそのページになり、ここでは見出しを返すServer Componentです。保存するとブラウザーがすぐに更新され、app/about/page.tsxを追加すると新しい/aboutページができます。
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run devインストールから Next.js の中心となる考え方まで、6 章で順を追って学びます。
Next.js について質問し、経験を共有し、意見を交わす場所です。
まだディスカッションはありません。最初の話題を始めましょう。
コメント 0件
ログイン · ログインするとコメントできます。
最初のコメントを書いてみましょう。