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 実行時に表示される質問は、プロジェクトの初期設定を簡単に選択できるようになっています。それぞれの意味は以下の通りです。

What is your project named? my-app
プロジェクトのフォルダ名（アプリ名）を指定します。my-app の部分がディレクトリ名になります。
Would you like to use TypeScript? No / Yes
TypeScript を使うかどうかを選びます。Yes を選ぶと自動的に TypeScript 用の設定ファイル（tsconfig.json など）が作成されます。
Would you like to use ESLint? No / Yes
コードの品質チェックツールである ESLint を導入するかどうかを選びます。Yes を選ぶと、コードの書き方を統一しやすくなります。
Would you like to use Tailwind CSS? No / Yes
CSS フレームワークの Tailwind CSS を導入するかどうかを選びます。Yes にすると、すぐにユーティリティクラスを使ったデザインが可能です。
Would you like your code inside a src/ directory? No / Yes アプリのソースコードを src/ ディレクトリ以下にまとめるかどうかを選びます。Yes を選ぶとプロジェクトのルートが整理されやすくなります。
Would you like to use App Router? (recommended) No / Yes
Next.js 13 以降で推奨される App Router を使用するかどうかを選びます。Yes を選ぶと最新の構造（app/ ディレクトリベース）でプロジェクトが作成されます。
Would you like to use Turbopack for next dev? No / Yes
開発サーバー起動時に新しいビルドシステム Turbopack を使うかどうかを選びます。Turbopack は従来より高速ですが、まだ実験的機能です。
Would you like to customize the import alias (@/* by default)? No / Yes
@/ を使ったインポートのエイリアスを変更するかどうかを選びます。Yes にすると、自分の好みのパスエイリアスを設定できます。
What import alias would you like configured? @/
インポートに使うエイリアスを指定します。デフォルトは @/ です。例えば ~/ や src/ なども指定可能です。

手動インストール

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

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

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

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

これらのスクリプトは、アプリケーション開発の異なる段階を指します。

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

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

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

appフォルダを作成します。次に、app内にlayout.tsxファイルを作成します。このファイルはルートレイアウトです。これは必須であり、<html>と<body>タグを含める必要があります。

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

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

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

ユーザーがアプリケーションのルート（/）にアクセスすると、layout.tsxとpage.tsxの両方がレンダリングされます。

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

開発サーバーの起動

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

Everyday Notes Life

Next.jsの環境構築方法

目次

システム要件

自動インストール

手動インストール

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

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

開発サーバーの起動