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

システム要件

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

Node.js 18.18以降。
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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

プロンプトの後、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ファイルを追加します。これがホームページ (/) になります。

pages/index.tsx

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

次に、グローバルレイアウトを定義するためにpages/内に_app.tsxファイルを追加します。カスタムAppファイルについて詳しくはこちらをご覧ください。

pages/_app.tsx

import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最後に、サーバーからの初期応答を制御するためにpages/内に_document.tsxファイルを追加します。カスタムDocumentファイルについて詳しくはこちらをご覧ください。

pages/_document.tsx

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として参照できます。

app/page.tsx

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
キャンセル

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"オプションを組み込みでサポートしています。

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

// Before
import { Button } from '../../../components/button'
 
// After
import { Button } from '@/components/button'

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

tsconfig.jsonまたはjsconfig.json

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

baseUrlパスを設定するだけでなく、"paths"オプションを使用してモジュールパスを"エイリアス"できます。

例えば、以下の設定は@/components/*をcomponents/*にマップします。

tsconfig.jsonまたはjsconfig.json

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

"paths"のそれぞれは、baseUrlの場所に相対的です。