目次
システム要件
システムが次の要件を満たしていることを確認してください。
自動インストール
新しい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 実行時に表示される質問は、プロジェクトの初期設定を簡単に選択できるようになっています。それぞれの意味は以下の通りです。
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ファイルを編集して保存すると、ブラウザで更新された結果が表示されます。
