Next.js＋TypeScript＋Tailwind CSSの案件テンプレ構成を完全解説【2025年版】

Last updated at 2025-06-04Posted at 2025-06-04

はじめに

2025年のフロントエンド案件では
Next.js × TypeScript × Tailwind CSS
が完全に案件対応の定番構成になっています。

単なるトレンドではなく「実労で採用されている」
保守性・開発効率・SEOパフォーマンスまで高水準
クライアント提案でも刺さりやすい構成

この記事では、受課開発・企業案件・SaaS開発などの現場で実際によく使われている「案件対応のNext.js構成」を、セットアップから設計までまとめます。

想定読者

フロントエンド案件で提案・受注したい人
Next.js＋TypeScript構成に乗り換えたい人
案件で提案できる「鉄板構成」を作りたい人

全体構成のイメージ

Next.js 14 (App Router構成)
TypeScript
Tailwind CSS (PostCSS)
Zustand / React Query (状態管理・API連携)
ESLint / Prettier / Stylelint (静的解析)
GitHub Actions (CI/CD)
Vercel or Netlify (ホスティング)
Figma連携 (UI実装)
Core Web Vitals最適化 (SEO/パフォーマンス)

1. Next.jsのApp Router構成

Next.jsは現在 App Router（/appディレクトリ）構成が主流です。

主なメリット

File-based Routingの進化系
Server Component対応
API Routesも使用可
SSG / SSR / ISRの自由な運用

インストール例

npx create-next-app@latest my-app
# オプションでTypeScript、Tailwind、App Router等を全てYes。

2. TypeScriptの型安全化

案件で求められるポイント

Generics活用
Props型共通管理
API応答型管理
zod連携

型定義例

import { z } from "zod";

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().nullable(),
});

type User = z.infer<typeof UserSchema>;

3. Tailwind CSSでスタイリング

カスタム設定例

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0070f3',
        secondary: '#ff4081',
      },
      fontFamily: {
        body: ['Inter', 'sans-serif'],
      },
    },
  },
};

4. Zustand、React Queryによる状態管理

Zustand

import create from "zustand";

type State = {
  count: number;
  increment: () => void;
};

export const useStore = create<State>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

React Query

import { useQuery } from "@tanstack/react-query";

const { data, error, isLoading } = useQuery(['user'], fetchUser);

5. ESLint / Prettier / Stylelint

インストール

npm install -D eslint prettier stylelint stylelint-config-standard-tailwindcss

6. GitHub Actions での CI/CD

サンプル YAML

name: CI

on:
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Lint
        run: npm run lint
      - name: Build
        run: npm run build

7. Vercel / Netlify ホスティング

Vercel: SSR/ISR 対応、Next.js官方ホスト、Previewが便利
Netlify: SSG案件で定番。ドメイン設定も楽

8. Figma連携

spacing、color、fontをTailwindに同期
デザイナー連携力の証明に

9. Core Web Vitals最適化

LCP: 画像最適化（lazyload含む）
INP: JS変更抜き出し
CLS: レイアウト固定

まとめ

Next.js (App Router)
TypeScript 型安全
Tailwind CSS スタイリング
Zustand＋React Query
CI/CD (自動化)
Vercel/Netlify
Figma連携＆Core Web Vitals対応

おわりに

これらを採り入れると、案件では
「安心して任せられるフロントエンドエンジニア」
になれます。

Qiitaでは案件に刺さる情報を発信し続けますので、LGTM・フォローよろしくお願いします！