総合実習 — フルスタック Todo アプリの完成

 1. プロジェクトセットアップ      (2章 + 16章)
 2. DB モデルとスキーマ           (21章 + 25章)
 3. 認証                          (32章)
 4. レイアウトとルーティング      (23章)
 5. Todo リスト — RSC             (24章 + 25章)
 6. Todo 追加 — Server Action     (27章)
 7. 完了トグル — Optimistic UI    (28章)
 8. 検索とタグフィルタ            (10章 + 21章)
 9. ダークモード                  (12章)
10. コンポーネントテスト          (29章)
11. E2E テスト                    (30章)
12. パフォーマンス点検            (31章)
13. デプロイと観測                (33章)

pnpm create next-app@latest fullstack-todo --typescript --eslint --app --tailwind
cd fullstack-todo

src/
├── app/                    # App Router ルート
│   ├── (auth)/             # 認証ルートグループ
│   ├── (app)/              # ログイン後ルートグループ
│   └── layout.tsx
├── components/             # 再利用コンポーネント
├── db/                     # Drizzle schema と client
├── lib/                    # Server Action、zod スキーマ、ユーティリティ
└── auth.ts                 # Auth.js 設定

import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
import { relations } from 'drizzle-orm';

export const users = sqliteTable('users', {
  id: text('id').primaryKey(),
  email: text('email').notNull().unique(),
  hashedPassword: text('hashed_password'),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
});

export const todos = sqliteTable('todos', {
  id: text('id').primaryKey(),
  userId: text('user_id').notNull().references(() => users.id),
  title: text('title').notNull(),
  description: text('description'),
  dueAt: integer('due_at', { mode: 'timestamp' }),
  completed: integer('completed', { mode: 'boolean' }).notNull().default(false),
  tags: text('tags', { mode: 'json' }).$type<string[]>().default([]),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
});

export const todosRelations = relations(todos, ({ one }) => ({
  user: one(users, { fields: [todos.userId], references: [users.id] }),
}));

export type Todo = typeof todos.$inferSelect;
export type NewTodo = typeof todos.$inferInsert;

import { z } from 'zod';

export const todoCreateSchema = z.object({
  title: z.string().min(1, 'タイトルは空にできません').max(200),
  description: z.string().max(2000).optional(),
  dueAt: z.coerce.date().optional(),
  tags: z.array(z.string()).default([]),
});

export type TodoCreateInput = z.infer<typeof todoCreateSchema>;

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Credentials from 'next-auth/providers/credentials';
import { DrizzleAdapter } from '@auth/drizzle-adapter';
import { db } from '@/db/client';
import { verifyPassword } from '@/lib/password';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: DrizzleAdapter(db),
  providers: [
    GitHub,
    Credentials({
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      authorize: async (credentials) => {
        const user = await db.query.users.findFirst({
          where: (u, { eq }) => eq(u.email, credentials.email as string),
        });
        if (!user?.hashedPassword) return null;
        const ok = await verifyPassword(
          credentials.password as string,
          user.hashedPassword,
        );
        return ok ? { id: user.id, email: user.email } : null;
      },
    }),
  ],
  session: { strategy: 'jwt' },
});

app/
├── (auth)/
│   ├── login/page.tsx
│   └── signup/page.tsx
├── (app)/
│   ├── layout.tsx          # サイドバー + ユーザーメニュー
│   ├── page.tsx            # Todo リスト(デフォルト)
│   └── todos/
│       ├── new/page.tsx
│       └── [id]/page.tsx
└── layout.tsx              # ルートレイアウト(テーマ / フォント)

import { auth } from '@/auth';
import { redirect } from 'next/navigation';
import { Sidebar } from '@/components/sidebar';

export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();
  if (!session?.user) redirect('/login');

  return (
    <div className="grid grid-cols-[240px_1fr] min-h-screen">
      <Sidebar user={session.user} />
      <main className="p-6">{children}</main>
    </div>
  );
}

import { auth } from '@/auth';
import { db } from '@/db/client';
import { todos } from '@/db/schema';
import { eq, desc } from 'drizzle-orm';
import { TodoList } from '@/components/todo-list';

export default async function TodosPage() {
  const session = await auth();
  const items = await db
    .select()
    .from(todos)
    .where(eq(todos.userId, session!.user!.id))
    .orderBy(desc(todos.createdAt));

  return <TodoList items={items} />;
}

import type { Todo } from '@/db/schema';
import { TodoItem } from './todo-item';

export function TodoList({ items }: { items: Todo[] }) {
  if (items.length === 0) {
    return <p className="text-muted">まだタスクがありません。追加してみてください。</p>;
  }
  return (
    <ul className="space-y-2">
      {items.map((t) => (
        <TodoItem key={t.id} todo={t} />
      ))}
    </ul>
  );
}

'use server';

import { auth } from '@/auth';
import { db } from '@/db/client';
import { todos } from '@/db/schema';
import { todoCreateSchema } from './schemas';
import { revalidatePath } from 'next/cache';
import { nanoid } from 'nanoid';

export async function createTodo(formData: FormData) {
  const session = await auth();
  if (!session?.user) throw new Error('Unauthorized');

  const parsed = todoCreateSchema.safeParse({
    title: formData.get('title'),
    description: formData.get('description'),
    dueAt: formData.get('dueAt') || undefined,
    tags: formData.getAll('tags'),
  });

  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  await db.insert(todos).values({
    id: nanoid(),
    userId: session.user.id,
    ...parsed.data,
    createdAt: new Date(),
  });

  revalidatePath('/');
}

import { createTodo } from '@/lib/actions';

export default function NewTodoPage() {
  return (
    <form action={createTodo} className="space-y-3">
      <input name="title" required className="input" placeholder="タイトル" />
      <textarea name="description" className="input" placeholder="説明(任意)" />
      <input name="dueAt" type="date" className="input" />
      <button type="submit" className="btn">追加</button>
    </form>
  );
}

'use client';

import { useOptimistic, useTransition } from 'react';
import type { Todo } from '@/db/schema';
import { toggleTodo } from '@/lib/actions';

export function TodoItem({ todo }: { todo: Todo }) {
  const [optimistic, setOptimistic] = useOptimistic(
    todo,
    (state, next: boolean) => ({ ...state, completed: next }),
  );
  const [pending, startTransition] = useTransition();

  return (
    <li className="flex items-center gap-2">
      <input
        type="checkbox"
        checked={optimistic.completed}
        disabled={pending}
        onChange={(e) => {
          const next = e.target.checked;
          startTransition(async () => {
            setOptimistic(next);
            await toggleTodo(todo.id, next);
          });
        }}
      />
      <span className={optimistic.completed ? 'line-through text-muted' : ''}>
        {optimistic.title}
      </span>
    </li>
  );
}

export default async function TodosPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; tag?: string }>;
}) {
  const { q, tag } = await searchParams;
  const session = await auth();

  const items = await db.query.todos.findMany({
    where: (t, { and, eq, like, sql }) => and(
      eq(t.userId, session!.user!.id),
      q ? like(t.title, `%${q}%`) : undefined,
      tag ? sql`json_extract(${t.tags}, '$') LIKE ${'%' + tag + '%'}` : undefined,
    ),
    orderBy: (t, { desc }) => desc(t.createdAt),
  });

  return <TodoList items={items} />;
}

'use client';

import { useRouter, useSearchParams } from 'next/navigation';
import { useTransition } from 'react';

export function TodoSearch() {
  const router = useRouter();
  const params = useSearchParams();
  const [, startTransition] = useTransition();

  return (
    <input
      defaultValue={params.get('q') ?? ''}
      placeholder="検索"
      onChange={(e) => {
        const next = new URLSearchParams(params);
        if (e.target.value) next.set('q', e.target.value);
        else next.delete('q');
        startTransition(() => router.replace(`?${next}`));
      }}
    />
  );
}

'use server';

import { cookies } from 'next/headers';

export async function setTheme(theme: 'light' | 'dark') {
  (await cookies()).set('theme', theme, {
    maxAge: 60 * 60 * 24 * 365,
    sameSite: 'lax',
  });
}

import { cookies } from 'next/headers';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const theme = (await cookies()).get('theme')?.value ?? 'light';
  return (
    <html lang="ja" data-theme={theme} className={theme}>
      <body>{children}</body>
    </html>
  );
}

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { TodoItem } from './todo-item';

vi.mock('@/lib/actions', () => ({
  toggleTodo: vi.fn().mockResolvedValue(undefined),
}));

describe('TodoItem', () => {
  it('チェックボックスクリック時に即座に UI が変わる(optimistic)', async () => {
    const user = userEvent.setup();
    render(
      <TodoItem todo={{
        id: '1', userId: 'u', title: '本を買う', description: null,
        dueAt: null, completed: false, tags: [], createdAt: new Date(),
      }} />,
    );

    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).not.toBeChecked();

    await user.click(checkbox);
    expect(checkbox).toBeChecked();
    expect(screen.getByText('本を買う')).toHaveClass('line-through');
  });
});

import { test, expect } from '@playwright/test';

test('会員登録から Todo 完了まで', async ({ page }) => {
  const email = `user-${Date.now()}@example.com`;

  await page.goto('/signup');
  await page.getByLabel('Email').fill(email);
  await page.getByLabel('Password').fill('correct-horse-battery-staple');
  await page.getByRole('button', { name: '登録' }).click();

  await page.waitForURL('/');
  await page.getByRole('link', { name: '新規 Todo' }).click();
  await page.getByLabel('タイトル').fill('最初のタスク');
  await page.getByRole('button', { name: '追加' }).click();

  await expect(page.getByText('最初のタスク')).toBeVisible();
  await page.getByRole('checkbox').click();
  await expect(page.getByText('最初のタスク')).toHaveClass(/line-through/);
});

pnpm dlx @lhci/cli@latest autorun --upload.target=temporary-public-storage

1. GitHub repo push
2. Vercel: New Project → repo 選択
3. 環境変数入力:
   - DATABASE_URL(Turso / Cloudflare D1 / Vercel Postgres から選択)
   - AUTH_SECRET
   - AUTH_GITHUB_ID / AUTH_GITHUB_SECRET
   - NEXT_PUBLIC_POSTHOG_KEY / NEXT_PUBLIC_POSTHOG_HOST
   - NEXT_PUBLIC_SENTRY_DSN
4. Deploy