AI Career Japan
プログラミング

【2025年最新】Next.js × TypeScript入門｜初心者向けチュートリアル

読了時間: 約12分

目次

  1. 1. Next.jsとは？
  2. 2. なぜTypeScriptを使うのか
  3. 3. 環境構築
  4. 4. プロジェクト構成の理解
  5. 5. 基本的な使い方
  6. 6. TypeScriptの基本
  7. 7. 次のステップ
  8. 8. よくある質問

「Reactを学んだけど、次は何を学べばいい？」「Next.jsって何がいいの？」という方に向けて、Next.jsとTypeScriptの入門ガイドをお届けします。

2025年現在、フロントエンド開発の定番は「React + Next.js + TypeScript」の組み合わせです。この記事では、環境構築から基本的な使い方まで、初心者向けにステップバイステップで解説します。

この記事でわかること

  • Next.jsの特徴とメリット
  • TypeScriptを使う理由
  • 環境構築の手順
  • 基本的なページ作成方法
  • TypeScriptの基本的な型定義

1. Next.jsとは？

Next.jsはVercel社が開発するReactベースのフロントエンドフレームワークです。Reactだけでは面倒なルーティング、SEO対策、パフォーマンス最適化などを簡単に実現できます。

Next.jsの主な特徴

  • ファイルベースのルーティング
  • SSR/SSG/ISRのサポート
  • API Routesでバックエンドも構築
  • 画像・フォント最適化
  • TypeScriptを標準サポート

採用企業

  • Netflix
  • TikTok
  • Notion
  • Hulu
  • 多くの日本企業

レンダリング方式

  • SSR（Server-Side Rendering）：リクエスト時にサーバーでHTMLを生成
  • SSG（Static Site Generation）：ビルド時にHTMLを事前生成
  • ISR（Incremental Static Regeneration）：一定時間ごとに再生成

2. なぜTypeScriptを使うのか

TypeScriptはJavaScriptに型システムを追加した言語です。2025年現在、フロントエンド開発ではTypeScriptがスタンダードになっています。

TypeScriptのメリット

  • バグを事前に防げる：型チェックでコンパイル時にエラーを検出
  • エディタ補完が強力：VSCodeの補完機能が格段に向上
  • リファクタリングが安全：変更の影響範囲が明確
  • チーム開発に最適：コードの意図が型で伝わる
// JavaScriptの場合：実行時までエラーがわからない
function greet(name) {
  return `Hello, ${name.toUpperCase()}!`;
}
greet(123); // 実行時エラー

// TypeScriptの場合：コンパイル時にエラーを検出
function greet(name: string): string {
  return `Hello, ${name.toUpperCase()}!`;
}
greet(123); // コンパイルエラー: 引数は string 型でなければなりません

3. 環境構築

必要なもの

  • Node.js：v18以上推奨（nodejs.orgからダウンロード）
  • VSCode：TypeScript対応の最適なエディタ

プロジェクト作成

create-next-appコマンドでプロジェクトを作成します。 

# npxを使う場合
npx create-next-app@latest my-app

# yarnを使う場合
yarn create next-app my-app

# pnpmを使う場合
pnpm create next-app my-app

いくつかの質問に答えます。 

Would you like to use TypeScript? › Yes
Would you like to use ESLint? › Yes
Would you like to use Tailwind CSS? › Yes（お好みで）
Would you like to use `src/` directory? › Yes（推奨）
Would you like to use App Router? › Yes（推奨）
Would you like to customize the default import alias? › No

開発サーバーの起動

cd my-app
npm run dev

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

4. プロジェクト構成の理解

my-app/
├── src/
│   ├── app/                # App Router（ページ・レイアウト）
│   │   ├── layout.tsx     # ルートレイアウト
│   │   ├── page.tsx       # トップページ
│   │   └── globals.css    # グローバルCSS
│   └── components/        # 再利用可能なコンポーネント
├── public/                # 静的ファイル（画像など）
├── next.config.js         # Next.js設定
├── tsconfig.json          # TypeScript設定
└── package.json           # 依存関係

App Routerのルーティング

App Routerでは、appディレクトリ内のフォルダ構造がURLパスに対応します。

ファイルパス URL
app/page.tsx /
app/about/page.tsx /about
app/blog/[slug]/page.tsx /blog/:slug

5. 基本的な使い方

ページの作成

app/about/page.tsxを作成して、Aboutページを追加してみましょう。 

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <p>このサイトについての説明です。</p>
    </main>
  );
}

レイアウトの作成

layout.tsxで共通のレイアウト（ヘッダー、フッターなど）を定義できます。 

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <header>共通ヘッダー</header>
        {children}
        <footer>共通フッター</footer>
      </body>
    </html>
  );
}

リンクの作成

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">ホーム</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

6. TypeScriptの基本

基本的な型

// 基本型
const name: string = "太郎";
const age: number = 25;
const isStudent: boolean = true;

// 配列
const numbers: number[] = [1, 2, 3];
const names: string[] = ["太郎", "花子"];

// オブジェクト
const user: { name: string; age: number } = {
  name: "太郎",
  age: 25,
};

型エイリアス（type）

// 型エイリアスを定義
type User = {
  id: number;
  name: string;
  email: string;
};

// 使用例
const user: User = {
  id: 1,
  name: "太郎",
  email: "[email protected]",
};

Propsの型定義（React）

// コンポーネントのProps型を定義
type ButtonProps = {
  label: string;
  onClick: () => void;
  disabled?: boolean; // ?は省略可能を意味
};

// コンポーネントで使用
export function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

7. 次のステップ

1. 公式チュートリアル

Next.js公式の「Learn Next.js」で実践的なアプリを作りながら学べます。

2. データフェッチング

Server ComponentsでのデータフェッチやAPI Routesの作成を学びましょう。

3. デプロイ

Vercelへのデプロイは数クリックで完了。GitHubと連携すると自動デプロイも可能。

4. 状態管理・認証

Zustand、NextAuth.jsなどを使った本格的なアプリ開発に挑戦。

8. よくある質問

Q. Next.jsとは何ですか？

ReactベースのフロントエンドフレームワークでSSR/SSGをサポートし、SEOに強く高パフォーマンスなWebアプリを構築できます。

Q. なぜTypeScriptを使うべきですか？

型情報でバグを事前に防ぎ、VSCodeの補完が強力になり、チーム開発でも安心して拡張できます。2025年現在はTypeScriptがスタンダードです。

Q. 学習にどのくらい時間がかかりますか？

JavaScript/Reactの経験があれば1〜2週間で基本を習得できます。完全な初心者はまずJavaScriptとReactを学んでから進むことをおすすめします。

まとめ

この記事のポイント

  • Next.jsはReactベースの