メインコンテンツまでスキップ

Next.jsプロジェクトをセットアップする方法

システム要件​

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

自動インストール​

私たちは、すべてを自動的に設定するcreate-next-appを使用して新しいNext.jsアプリを始めることをお勧めします。プロジェクトを作成するには、以下のコマンドを実行してください：

ターミナル
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ファイルを開き、以下のscriptsを追加してください：

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

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

  • dev: next devを実行して、Next.jsを開発モードで開始します
  • build: next buildを実行して、アプリケーションを本番環境用にビルドします
  • start: next startを実行して、Next.jsの本番サーバーを開始します
  • lint: next lintを実行して、Next.jsの組み込みESLint構成を設定します

appディレクトリを作成する​

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

appフォルダを作成し、次にlayout.tsxとpage.tsxファイルを追加します。これらは、ユーザーがアプリケーションのroot（/）にアクセスしたときに表示されます。

Appフォルダ構成Appフォルダ構成

Root レイアウトをapp/layout.tsx内に作成し、必要な<html>と<body>タグを含めます：

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

最後に、初期コンテンツのあるホームページapp/page.tsxを作成します：

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

Good to know:

  • layout.tsxを作成し忘れた場合、next devで開発サーバーを実行すると、Next.jsが自動的にこのファイルを作成します
  • プロジェクトのrootにsrcディレクトリを使用して、アプリケーションのコードを設定ファイルから分離することができます

publicフォルダを作成する（オプション）​

プロジェクトのrootにpublicフォルダを作成して、画像、フォントなどの静的アセットを保存することができます。public内のファイルは、それ以降コード内で基準URL（/）から参照することができます。

開発サーバーを実行する​

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

TypeScriptを設定する​

最低限のTypeScriptバージョン： v4.5.2

Next.jsは、組み込みのTypeScriptサポートを備えています。プロジェクトにTypeScriptを追加するには、ファイルの形式を.tsまたは.tsxに変更します。next devを実行すると、Next.jsが必要な依存関係を自動的にインストールし、推奨構成オプションを含むtsconfig.jsonファイルを追加します。

Good to know:

  • すでにjsconfig.jsonファイルを持っている場合は、古いjsconfig.jsonから新しいtsconfig.jsonにpathsコンパイラオプションをコピーし、古いjsconfig.jsonファイルを削除します。

IDEプラグイン​

Next.jsには、カスタムTypeScriptプラグインと型チェッカーが含まれており、VSCodeおよび他のコードエディタで高度な型検査と自動補完を利用できます。

VS Codeでこのプラグインを有効にするには、以下の手順に従ってください：

  1. コマンドパレットを開く（Ctrl/⌘ + Shift + P）
  2. 「TypeScript: Select TypeScript Version」を検索
  3. 「Use Workspace Version」を選択
TypeScriptコマンドパレットTypeScriptコマンドパレット

これでファイルを編集すると、カスタムプラグインが有効になります。next buildを実行すると、カスタム型チェッカーが使用されます。

TypeScript構成ページでは、プロジェクトでTypeScriptを使用する方法についてさらに詳しく知ることができます。

ESLintを設定する​

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

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

package.json
{
  "scripts": {
    "lint": "next lint"
  }
}

その後、npm run lintを実行すると、インストールおよび設定プロセスがガイドされます。

ターミナル
pnpm lint

次のようなプロンプトが表示されます：

? How would you like to configure ESLint?

❯ Strict (recommended)
Base
Cancel

  • Strict: Next.jsの基本的なESLint構成と、より厳格なCore Web Vitalsルールセットを含みます。初めてESLintを設定する開発者には、この設定が推奨されます
  • Base: Next.jsの基本的なESLint構成を含みます
  • Cancel: どのESLint構成も含まれません。このオプションは独自のカスタムESLint構成を設定する予定がある場合にのみ選択してください

2つの構成オプションのいずれかが選択されると、Next.jsは自動的にeslintとeslint-config-nextをアプリケーションの依存関係としてインストールし、プロジェクトのrootに選択した構成を含む.eslintrc.jsonファイルを作成します。

ESLintを実行してエラーを検出したい時はいつでもnext lintを実行できます。ESLintが設定されると、毎回のビルド（next build）中にも自動的に実行されます。エラーはビルドを失敗させ、警告はビルドを失敗させません。

ESLint Pluginページでは、プロジェクトでESLintを設定する方法についてさらに詳しく知ることができます。

絶対インポートとモジュールパスエイリアスを設定する​

Next.jsは、tsconfig.jsonおよびjsconfig.jsonファイルの"paths"および"baseUrl"オプションをサポートしています。これらのオプションを利用することで、プロジェクトディレクトリを絶対パスにエイリアスし、モジュールのインポートをより簡単にすることができます。例：

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

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

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

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の場所に対して相対的です。例：

src/app/page.tsx
import Button from '@/components/button'
import '@/styles/styles.css'

export default function HomePage() {
  return (
    <div>
      <h1>Hello World</h1>
      <Button />
    </div>
  )
}