如何在轻松几步内手动创建一个 Next.js + TypeScript 项目

2023-09-22 04:40:42

Next.js + TypeScript：轻松构建交互式 Web 应用程序

简介

Next.js 和 TypeScript 的组合为现代化和交互式 Web 应用程序的开发提供了强大的平台。从头开始手动构建这样的应用程序通常涉及繁琐的工作。本指南将引导您逐步创建基本的 Next.js + TypeScript 项目，简化该过程。

先决条件

对 Next.js 的基本了解
对 TypeScript 的熟悉
舒适地使用命令行

步骤 1：初始化 Node.js 项目

打开命令行终端。
导航到您想要创建应用程序的目录。
运行命令：npx create-next-app。
输入应用程序的名称并按 Enter 键。
选择 "TypeScript" 选项并按 Enter 键。
等待初始化器为您生成所有必需的文件和文件夹。

步骤 2：TypeScript 配置

打开 tsconfig.json 文件。
确保 strict 属性设置为 true 以启用严格的 TypeScript 类型检查。
根据您的需求进一步调整 TypeScript 配置。

步骤 3：组件和路由

打开 pages/index.tsx 文件并将其替换为：

import React from 'react';

export default function Home(): React.FC<{}> {
  return <div>Hello, Next.js + TypeScript</div>;
}

导航到 pages/api/[id].tsx 文件并将其替换为：

import { useRouter } from 'next/router';
import React from 'react';

export default function Post({ query }: React.FC<{query: Record<string, string>}>) {
  const router = useRouter();
  const id = query.id;
  return <div>Post ID: {id || 'Not found'}}</div>;
}

export async function getServerSideProps({ params }: {params: Record<string, string>}) {
  // ...此处可从 API 请求获取数据并为组件预先提取。
}