Next.js 实战 (一)：项目搭建指南

前言

时间过得好快，一下就来到2024下半年了。

上半年我为了学习 Nuxt3，从 0 到 1 开发了一个导航网站：Dream Site，目前主要的功能都已完成了，后续有时间再慢慢添加有趣的功能。

下半年开始进攻 Next.js，前段时间我使用 Next.js 重构了一个项目：今日热榜，对 Next.js 有一定的认识，这次打算完整地从 0 到 1 搭建一个后台模板，进而探索 Next.js 的奥秘。

项目搭建

1. 官方建议使用 create-next-app 启动一个新的 Next.js 应用程序：

npx create-next-app@latest

2. 安装时，你将看到以下提示：

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Next.js现在默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。

3. 项目运行