目初始化与环境搭建

欢迎来到 Next.js 的学习！在这整个后续的学习中，我们将从零开始搭建一个名为 “Free Education” 的公司品牌网站。通过这个项目，你将学习到如何使用最新的 Next.js 和 Tailwind CSS 来构建现代化的 Web 应用！是不是很激动人心，废话不多说，我们直接开始！

安装node.js环境

在开始创建 Next.js 项目之前，我们需要先确保你的电脑上已经安装了 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它让我们可以在服务器端运行 JavaScript 代码。对于 Next.js 开发来说，Node.js 是必不可少的工具。

|
node --version

|
npm --version

创建你的第一个 Next.js 项目

让我们开始创建项目。首先，务必确保你的电脑上已经安装了 Node.js! 打开终端，运行以下命令：

|
npx create-next-app@latest free-education

这个命令会启动一个交互式的设置向导。当系统询问你时，建议选择以下配置：

• TypeScript: Yes（我们将在项目中使用 TypeScript）
• ESLint: Yes（代码质量检查工具）
• Tailwind CSS: No（我们稍后会手动安装 Tailwind CSS 4）
• App Router: Yes（使用新的 App Router）
• src/ directory: No（使用默认的项目结构）
• Import alias: Yes（使用 @/ 作为导入别名）

创建完成后，进入项目目录：

|
cd free-education

现在让我们看看项目的基本结构。打开你的代码编辑器，你会看到类似这样的目录结构：

|
free-education/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── next.config.mjs
├── package.json
└── tsconfig.json

这个结构是 Next.js 16 使用 App Router 时的标准布局。app 目录是核心，所有的页面和布局都在这里定义。layout.tsx 是根布局文件，它会被所有页面共享。page.tsx 则是首页组件。

理解项目结构

在深入编码之前，让我们先理解一下这个项目结构的设计理念。Next.js 的 App Router 采用了一种约定优于配置的方式，这意味着你只需要按照特定的文件命名规则，Next.js 就会自动为你处理路由。

app 目录下的每个文件夹都代表一个路由段。例如，如果你创建了 app/about/page.tsx，那么访问 /about 路径时就会渲染这个页面。这种设计让路由变得非常直观，你不需要手动配置路由表。

layout.tsx 文件的作用是定义共享的布局。它会被该目录及其所有子目录的页面使用。根目录的 layout.tsx 会包裹整个应用，通常用于设置 HTML 结构、全局样式和提供者组件。

配置 TypeScript

虽然我们在创建项目时已经选择了 TypeScript，但让我们检查一下 tsconfig.json 文件，确保配置符合我们的需求。打开这个文件，你应该看到类似这样的配置：

|
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",

这个配置已经为 Next.js 项目做了优化。paths 配置允许我们使用 @/ 作为项目根目录的别名，这样在导入文件时就不需要使用相对路径了。例如，你可以使用 import { Button } from '@/components/Button' 而不是 import { Button } from '../../components/Button'。

安装和配置 Tailwind CSS 4

Tailwind CSS 4 带来了全新的配置方式。与之前的版本不同，Tailwind CSS 4 使用 CSS 原生的方式来配置，这使得配置变得更加简单和直观。 首先，让我们安装必要的依赖：

|
npm install -D tailwindcss@latest @tailwindcss/postcss@latest

注意，Tailwind CSS 4 不再需要单独的 postcss 和 autoprefixer 包，因为 @tailwindcss/postcss 已经包含了这些功能。

接下来，我们需要创建 PostCSS 配置文件。在项目根目录创建 postcss.config.mjs 文件：

|
const config = {
  plugins: ["@tailwindcss/postcss"],
};
 
export default config;

这个配置文件告诉 PostCSS 使用 Tailwind CSS 的 PostCSS 插件来处理样式。

现在，让我们配置全局样式文件。打开 app/globals.css，清空现有内容，然后添加以下代码：

|
@import "tailwindcss";

这就是 Tailwind CSS 4 的新语法！不再需要分别导入 base、components 和 utilities，只需要一行 @import "tailwindcss" 就可以导入所有功能。

验证安装

现在让我们验证一下一切是否正常工作。首先，启动开发服务器：

|
npm run dev

打开浏览器，访问 http://localhost:3000，你应该能看到 Next.js 的默认欢迎页面。

接下来，让我们修改首页，添加一些 Tailwind CSS 样式来验证配置是否正确。打开 app/page.tsx 文件，将其内容替换为：

|
export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Welcome to Free Education
      </h1>
    </div>
  )
}

保存文件后，浏览器应该会自动刷新（这要归功于 Next.js 的热模块替换功能）。如果你看到页面背景变成了浅灰色，标题显示为蓝色的大字，那么恭喜你，Tailwind CSS 已经成功配置了！

让我们再添加一些样式，让页面看起来更专业一些：

|
export default function Home() {
  return (
    <div className="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
      <div className="text-center space-y-4">
        <h1 className="text-5xl font-bold text-gray-900">
          Welcome to Free Education
        </h1>
        <p className="text-xl text-gray-600">
          开启你的学习之旅
        </

这里我们使用了 Tailwind CSS 的渐变背景（bg-linear-to-br）和间距工具类（space-y-4）。这些实用类让样式编写变得非常高效。

理解开发服务器

当你运行 npm run dev 时，Next.js 启动了一个开发服务器。这个服务器提供了许多有用的功能：

• 热模块替换（HMR）：当你修改代码时，浏览器会自动更新，无需手动刷新。这大大提升了开发效率。
• 错误提示：如果代码有错误，Next.js 会在浏览器中显示详细的错误信息，帮助你快速定位问题。
• 快速刷新：Next.js 会智能地只更新发生变化的部分，而不是重新加载整个页面，这让开发体验更加流畅。

下一步

现在你已经成功搭建了开发环境，并且验证了 Tailwind CSS 的配置。在下一部分，我们将学习 Next.js 的路由系统，了解如何创建多个页面并实现页面间的导航。