Next.js - Typescript

Next.js - TypeScript 集成

Next.js 为 TypeScript 提供了出色的内置支持，增强了类型安全性和开发者体验。使用 TypeScript 设置一个新项目非常简单。

初始化 TypeScript 项目

使用 create-next-app 是启动新的 Next.js 项目并集成 TypeScript 的最简单方法：

npx create-next-app@latest my-typescript-app --typescript

或者，如果你不指定 --typescript，create-next-app 会提示你是否要使用 TypeScript。选择“是”（默认）也会达到同样的效果。

此命令会自动执行以下操作：

安装必要的 TypeScript 依赖项（typescript、@types/react、@types/node）。
创建一个预配置好的 tsconfig.json 文件，包含合理的默认设置。
生成使用 .ts 和 .tsx 扩展名的基本项目文件（例如，app/layout.tsx、app/page.tsx）。

向现有项目添加 TypeScript

如果你有一个现有的 JavaScript Next.js 项目，可以手动添加 TypeScript 支持：

在项目根目录下创建一个空的 tsconfig.json 文件：

touch tsconfig.json

安装所需的依赖项：

npm install --save-dev typescript @types/react @types/node

运行开发服务器：

npm run dev

Next.js 会检测到 tsconfig.json 和已安装的类型定义。它会自动填充 tsconfig.json 文件，使其包含推荐的设置，并创建一个 next-env.d.ts 文件用于 Next.js 的类型定义。

现在你可以开始将 .js/.jsx 文件重命名为 .ts/.tsx 并添加类型了。

示例：类型化的页面组件

这是一个简单的页面组件在 TypeScript 中的样子（app/about/page.tsx）：

import { Metadata } from 'next';

// Optional: Define metadata for the page
// 可选：为页面定义元数据
export const metadata: Metadata = {
  title: 'About Us',
};

export default function AboutPage() {
  const teamMembers: string[] = ['Alice', 'Bob', 'Charlie'];

  return (
    <main>
      <h1>About Our Team</h1>
      <ul>
        {teamMembers.map((member) => (
          <li key={member}>{member}</li>
        ))}
      </ul>
    </main>
  );
}

示例：类型化的 API 路由 (Route Handler)

Route Handlers (App Router 中等同于 API 路由) 也从 TypeScript 中获益良多。创建 app/api/hello/route.ts：

import { NextResponse } from 'next/server';

// Define the expected structure of the response data
// 定义响应数据的预期结构
interface HelloResponse {
  message: string;
}

export async function GET(request: Request): Promise<NextResponse<HelloResponse>> {
  // You can access request details via the 'request' object if needed
  // 如果需要，可以通过 'request' 对象访问请求详情
  // const { searchParams } = new URL(request.url);
  // const name = searchParams.get('name');

  const data: HelloResponse = {
    message: 'Welcome from the API!'
  };

  return NextResponse.json(data);
}

使用 TypeScript 有助于在开发过程中捕获错误，提高代码可读性，并实现更好的工具支持，如自动补全和重构。

验证 API 路由

运行 npm run dev 并在浏览器中访问 http://localhost:3000/api/hello。你应该会看到 JSON 响应：

{"message":"Welcome from the API!"}