logoNext.js 日本語
ドキュメントブログ学習
はじめに/はじめに/インストール

インストール

システム要件:

  • Node.js 16.14 以降
  • macOS、Windows（WSL含む）、Linux がサポートされています

自動インストール

新しい Next.js アプリケーションを作成するには、create-next-app を使用することを推奨します。これによりすべてが自動的にセットアップされます。プロジェクトを作成するには、次のコマンドを実行します:

Terminal
npx create-next-app@latest

インストール中に次のプロンプトが表示されます:

Terminal
プロジェクト名を入力してください? my-app
TypeScript を使用しますか? No / Yes
ESLint を使用しますか? No / Yes
Tailwind CSS を使用しますか? No / Yes
`src/` ディレクトリを使用しますか? No / Yes
App Router を使用しますか? (推奨) No / Yes
デフォルトのインポートエイリアス (@/*) をカスタマイズしますか? No / Yes
どのインポートエイリアスを設定しますか? @/*

プロンプトに回答後、create-next-app はプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。

補足:

手動インストール

手動で新しい Next.js アプリケーションを作成するには、必要なパッケージをインストールします:

Terminal
npm install next@latest react@latest react-dom@latest

package.json ファイルを開き、次の scripts を追加します:

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

これらのスクリプトは、アプリケーション開発の異なる段階に対応しています:

  • dev: 開発モードで Next.js を起動する next dev を実行
  • build: 本番用にアプリケーションをビルドする next build を実行
  • start: Next.js 本番サーバーを起動する next start を実行
  • lint: Next.js 組み込みの ESLint 設定をセットアップする next lint を実行

ディレクトリの作成

Next.js はファイルシステムベースのルーティングを使用しており、アプリケーション内のルートはファイル構成によって決まります。

app ディレクトリ

新しいアプリケーションでは App Router の使用を推奨します。このルーターは React の最新機能を使用でき、コミュニティフィードバックに基づいて Pages Router から進化したものです。

app/ フォルダを作成し、layout.tsx と page.tsx ファイルを追加します。これらはアプリケーションのルート (/) にアクセスした際にレンダリングされます。

App フォルダ構成

app/layout.tsx 内に必須の <html> タグと <body> タグを含む ルートレイアウト を作成します:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最後に、初期コンテンツを含むホームページ app/page.tsx を作成します:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

補足: layout.tsx の作成を忘れた場合、Next.js は next dev で開発サーバーを実行する際に自動的にこのファイルを作成します。

App Router の使用方法 についてさらに学びましょう。

pages ディレクトリ (オプション)

App Router ではなく Pages Router を使用したい場合は、プロジェクトルートに pages/ ディレクトリを作成できます。

次に、pages フォルダ内に index.tsx ファイルを追加します。これがホームページ (/) になります:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

続いて、グローバルレイアウトを定義するために pages/ 内に _app.tsx ファイルを追加します。カスタム App ファイル についてさらに学びましょう。

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

最後に、サーバーからの初期レスポンスを制御するために pages/ 内に _document.tsx ファイルを追加します。カスタム Document ファイル についてさらに学びましょう。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Pages Router の使用方法 についてさらに学びましょう。

補足: 同じプロジェクトで両方のルーターを使用できますが、app 内のルートが pages よりも優先されます。混乱を避けるため、新しいプロジェクトではどちらか一方のルーターのみを使用することを推奨します。

public フォルダ (オプション)

画像やフォントなどの静的アセットを格納する public フォルダを作成します。public ディレクトリ内のファイルは、ベース URL (/) から始まるパスでコード内から参照できます。

開発サーバーの起動

  1. npm run dev を実行して開発サーバーを起動します
  2. http://localhost:3000 にアクセスしてアプリケーションを表示します
  3. app/layout.tsx (または pages/index.tsx) ファイルを編集して保存すると、ブラウザで更新結果を確認できます

はじめに

Next.js を使用してフルスタック Web アプリケーションを作成する方法を学びます。

プロジェクト構造

Next.jsプロジェクトにおけるフォルダとファイルの命名規則一覧