新しいNext.jsアプリケーションを作成する

システム要件

開始する前に、システムが以下の要件を満たしていることを確認してください:

Node.js 18.18 以降
macOS、Windows（WSLを含む）、またはLinux

自動インストール

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

ターミナル

npx create-next-app@latest

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

ターミナル

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

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

手動インストール

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

ターミナル

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

次に、以下のスクリプトをpackage.jsonファイルに追加します:

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

これらのスクリプトは、アプリケーション開発のさまざまな段階を参照しています:

next dev: 開発サーバーを起動します
next build: 本番用にアプリケーションをビルドします
next start: 本番サーバーを起動します
next lint: ESLintを実行します

`pages`ディレクトリの作成

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

プロジェクトのルートにpagesディレクトリを作成します。次に、pagesフォルダ内にindex.tsxファイルを追加します。これがホームページ(/)になります:

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

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>
  )
}

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

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

`public`フォルダの作成（オプション）

プロジェクトのルートにpublicフォルダを作成して、画像、フォントなどの静的アセットを保存します。public内のファイルは、ベースURL(/)から始まるパスでコードから参照できます。

これらのアセットはルートパス(/)を使用して参照できます。例えば、public/profile.pngは/profile.pngとして参照できます:

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

開発サーバーの実行

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

TypeScriptのセットアップ

TypeScriptの最小バージョン: v4.5.2

Next.jsにはTypeScriptサポートが組み込まれています。プロジェクトにTypeScriptを追加するには、ファイルを.ts / .tsxにリネームしてnext devを実行します。Next.jsは必要な依存関係を自動的にインストールし、推奨設定オプションを含むtsconfig.jsonファイルを追加します。

詳細についてはTypeScriptリファレンスページを参照してください。

ESLintのセットアップ

Next.jsにはESLintが組み込まれています。create-next-appで新しいプロジェクトを作成すると、必要なパッケージが自動的にインストールされ、適切な設定が行われます。

既存のプロジェクトに手動でESLintを追加するには、next lintをスクリプトとしてpackage.jsonに追加します:

package.json

{
  "scripts": {
    "lint": "next lint"
  }
}

次に、npm run lintを実行すると、インストールと設定プロセスがガイドされます。

ターミナル

npm run lint

以下のようなプロンプトが表示されます:

? ESLintをどのように設定しますか?

❯ Strict (推奨)
Base
Cancel

Strict: Next.jsの基本ESLint設定に加えて、より厳格なCore Web Vitalsルールセットを含みます。ESLintを初めて設定する開発者に推奨される設定です
Base: Next.jsの基本ESLint設定を含みます
Cancel: 設定をスキップします。独自のカスタムESLint設定を計画している場合はこのオプションを選択してください

StrictまたはBaseが選択された場合、Next.jsは自動的にeslintとeslint-config-nextを依存関係としてインストールし、選択した設定を含む.eslintrc.jsonファイルをプロジェクトのルートに作成します。

ESLintを実行してエラーを検出するには、next lintを実行します。ESLintが設定されると、ビルド時(next build)にも自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗させません。

詳細についてはESLintプラグインページを参照してください。

絶対インポートとモジュールパスエイリアスの設定

Next.jsはtsconfig.jsonとjsconfig.jsonファイルの"paths"および"baseUrl"オプションをサポートしています。

これらのオプションを使用すると、プロジェクトディレクトリを絶対パスにエイリアスできるため、モジュールのインポートがより簡単でクリーンになります。例えば:

// 変更前
import { Button } from '../../../components/button'

// 変更後
import { Button } from '@/components/button'

絶対インポートを設定するには、baseUrl設定オプションをtsconfig.jsonまたはjsconfig.jsonファイルに追加します。例えば:

tsconfig.json または jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

baseUrlパスを設定するのに加えて、"paths"オプションを使用してモジュールパスを"alias"できます。

例えば、以下の設定は@/components/*をcomponents/*にマッピングします:

tsconfig.json または jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

各"paths"はbaseUrlの場所からの相対パスです。

新しいNext.jsアプリケーションを作成する

On this page