从0死磕全栈之Next.js App Router 入门实战：5 分钟搭建一个待办事项（Todo List）应用。-优快云博客

Next.js App Router 入门实战：5 分钟搭建待办事项应用

全栈开发中，Next.js 的 App Router 提供了更直观的路由和数据处理方式。以下通过一个待办事项（Todo List）应用演示如何快速搭建完整功能。

项目初始化与依赖安装

使用以下命令创建 Next.js 项目并选择所需配置：

npx create-next-app@latest todo-app

选择配置时需启用 TypeScript 和 App Router。完成后安装依赖：

cd todo-app
npm install uuid @types/uuid

uuid 用于生成唯一 ID，@types/uuid 提供类型支持。

数据结构与类型定义

在 types/todo.ts 中定义待办事项的数据结构：

export interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

页面布局与路由设置

在 app/layout.tsx 中设置全局布局：

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Todo App',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

主页面路由位于 app/page.tsx，后续将在此实现核心功能。

实现待办事项列表

在 app/page.tsx 中使用 React 状态管理待办事项：

'use client';
import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import type { Todo }
### Next.js App Router 入门实战：5 分钟搭建待办事项应用

全栈开发中，Next.js 的 App Router 提供了更直观的路由和数据处理方式。以下通过一个待办事项（Todo List）应用演示如何快速搭建完整功能。

---

### 项目初始化与依赖安装

使用以下命令创建 Next.js 项目并选择所需配置：
```bash
npx create-next-app@latest todo-app