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

インストール

システム要件:

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

自動インストール

新しい Next.js アプリは create-next-app を使用して作成することを推奨します。これによりすべてが自動的にセットアップされます。プロジェクトを作成するには以下を実行:

ターミナル
npx create-next-app@latest

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

ターミナル
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

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

Next.js が初めての場合は、プロジェクト構造 ドキュメントでアプリケーション内のすべての可能なファイルとフォルダの概要を確認してください。

知っておくと便利:

手動インストール

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

ターミナル
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/page.tsx（または pages/index.tsx）ファイルを編集して保存し、ブラウザで更新結果を確認

はじめに

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

プロジェクト構造

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