Next.jsをゼロから始める！create-next-appで最初の一歩を踏み出そう

こんにちは、とまだです。

Reactで開発していて、 「もっと効率的に作りたい」 「SEO対策もしっかりしたい」 と思ったことはありませんか？

実はNext.jsを使えば、 これらの悩みを解決できるんです。

今回は完全初心者の方でも理解できるように、 Next.jsのインストールから最初のページ作成まで、 手を動かしながら学べる内容にしました。

Next.jsって何？30秒で理解しよう

Next.jsは「Reactの便利セット」です。

コンビニ弁当に例えると分かりやすいですね。

Reactは「お米」のようなもの。 基本的だけど、おかずは自分で用意する必要があります。

Next.jsは「幕の内弁当」です。 お米もおかずも箸も全部入っています。

だから、すぐに開発を始められるんです。

まずは開発環境を整えよう

Next.jsを始める前に、 必要なツールを準備しましょう。

Node.jsのインストール

Next.jsを使うには、 Node.jsが必要です。

公式サイトからダウンロードしてください。 https://nodejs.org/

LTS版（安定版）を選べば間違いありません。

インストールできたか確認してみましょう。

node --version
# v20.11.0 のような表示が出ればOK

エディタの準備

コードを書くエディタは、 VS Codeがおすすめです。

無料で高機能、 Next.js開発に必要な拡張機能も豊富です。

いよいよNext.jsアプリを作ろう！

準備ができたら、 実際にアプリを作ってみましょう。

create-next-appでプロジェクト作成

ターミナル（コマンドプロンプト）を開いて、 以下のコマンドを実行します。

npx create-next-app@latest

このコマンド一つで、 Next.jsアプリの雛形が作られます。

設定オプションを一つずつ理解しよう

コマンドを実行すると、 いくつか質問されます。

初心者の方は戸惑うかもしれませんね。 一つずつ説明していきます。

1. プロジェクト名

What is your project named? my-app

アプリの名前を決めます。 「my-first-nextjs」など、 好きな名前をつけてください。

英数字とハイフンが使えます。

2. TypeScriptを使うか

Would you like to use TypeScript? No / Yes

TypeScriptは型付きJavaScriptです。

初心者の方は「No」でOKです。 慣れてきたら「Yes」にしましょう。

3. ESLintを使うか

Would you like to use ESLint? No / Yes

ESLintはコードの品質チェックツールです。

「Yes」を選ぶと、 変なコードを書いたときに教えてくれます。

初心者こそ「Yes」がおすすめです。

4. Tailwind CSSを使うか

Would you like to use Tailwind CSS? No / Yes

Tailwind CSSはスタイリングツールです。

クラス名でデザインを指定できます。 「Yes」を選んでおくと便利です。

5. srcディレクトリを使うか

Would you like your code inside a `src/` directory? No / Yes

コードをsrcフォルダにまとめるかどうかです。

整理しやすくなるので、 「Yes」がおすすめです。

6. App Routerを使うか

Would you like to use App Router? (recommended) No / Yes

Next.js 13から導入された新しい機能です。

推奨されているので「Yes」を選びましょう。 最新の書き方を学べます。

7. Turbopackを使うか

Would you like to use Turbopack for `next dev`? No / Yes

開発時の高速化ツールです。

まだ実験的な機能なので、 初心者の方は「No」で大丈夫です。

8. インポートエイリアスをカスタマイズするか

Would you like to customize the import alias (@/* by default)? No / Yes

ファイルのインポート方法の設定です。

デフォルトのままで問題ないので、 「No」を選びましょう。

作成されたファイルを見てみよう

プロジェクトが作成されたら、 フォルダを開いてみましょう。

cd my-app  # 作成したプロジェクト名

主要なファイル構成はこんな感じです。

my-app/
├── src/
│   └── app/          ← ページを置く場所
│       ├── layout.tsx
│       ├── page.tsx
│       └── globals.css
├── public/           ← 画像などを置く場所
├── package.json      ← プロジェクトの設定
└── next.config.js    ← Next.jsの設定

本棚に例えると、 こんなイメージです。

• src/app/ → 本（ページ）を置く棚
• public/ → 写真や資料を置く引き出し
• package.json → 図書館の目録

開発サーバーを起動してみよう

では、実際に動かしてみましょう。

npm run dev

ブラウザで http://localhost:3000 を開くと、 Next.jsのウェルカムページが表示されます。

これで開発環境の準備は完了です！

最初のページを作ってみよう

デフォルトのページを編集して、 オリジナルのページを作りましょう。

src/app/page.tsx（TypeScriptを使わない場合はpage.js）を開いて、 中身を全部消して以下のコードに置き換えます。

export default function Home() {
  return (
    <main>
      <h1>はじめてのNext.js！</h1>
      <p>これが私の最初のページです。</p>
    </main>
  );
}

保存すると、 ブラウザが自動的に更新されます。

これがNext.jsの便利な機能の一つ、 「ホットリロード」です。

新しいページを追加してみよう

Next.jsでは、 ファイルを作るだけでページが追加できます。

src/app/about/page.jsを作成してみましょう。

mkdir src/app/about

そしてsrc/app/about/page.jsに以下を記述。

export default function About() {
  return (
    <main>
      <h1>私について</h1>
      <p>Next.jsを勉強中です！</p>
    </main>
  );
}

ブラウザで http://localhost:3000/about にアクセスすると、 新しいページが表示されます。

フォルダ名がそのままURLになる。 これがNext.jsの魅力の一つです。

ページ間のリンクを作ろう

ページ間を移動できるように、 リンクを追加しましょう。

src/app/page.jsを編集します。

import Link from 'next/link'

export default function Home() {
  return (
    <main>
      <h1>はじめてのNext.js！</h1>
      <p>これが私の最初のページです。</p>
      <Link href="/about">
        私についてのページへ
      </Link>
    </main>
  );
}

Linkコンポーネントを使うと、 ページ遷移が高速になります。

普通の<a>タグと違い、 必要な部分だけを更新するんです。

スタイルを追加してみよう

Tailwind CSSを有効にしていれば、クラス名でスタイルを追加できます。

import Link from 'next/link'

export default function Home() {
  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold mb-4">
        はじめてのNext.js！
      </h1>
      <p className="mb-4">
        これが私の最初のページです。
      </p>
      <Link
        href="/about"
        className="text-blue-500 hover:underline"
      >
        私についてのページへ
      </Link>
    </main>
  );
}

クラス名の意味：

• p-8 → padding 8単位
• text-3xl → 文字サイズ特大
• font-bold → 太字
• mb-4 → 下マージン4単位
• text-blue-500 → 青色
• hover:underline → ホバー時に下線

よくあるトラブルと解決法

エラー：command not found

Node.jsがインストールされていない可能性があります。 Node.jsを再インストールしてください。

エラー：port 3000 is already in use

別のアプリが3000番ポートを使っています。

違うポートで起動しましょう。

npm run dev -- -p 3001

ページが更新されない

キャッシュが原因かもしれません。

ブラウザの開発者ツール（F12）を開いて、 「Network」タブの「Disable cache」にチェックを入れてみてください。

今すぐ始めてみよう

Next.jsは最初は難しく感じるかもしれません。

でも、一つずつ理解していけば、必ず使いこなせるようになります。

まずは今回作ったプロジェクトで、いろいろ試してみてください。

エラーが出ても大丈夫。 それも学習の一部です！