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

在开始创建 Next.js 项目之前,我们需要先确保你的电脑上已经安装了 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,它让我们可以在服务器端运行 JavaScript 代码。对于 Next.js 开发来说,Node.js 是必不可少的工具。
在 macOS 上安装 Node.js 有多种方式,我们推荐使用官方安装包,这是最简单直接的方法。
首先,访问 Node.js 的官方网站 https://nodejs.org/,你会看到两个版本:LTS(长期支持版本)和 Current(最新版本)。对于学习和开发,我们建议选择 LTS 版本,因为它更加稳定可靠。
下载完成后,你会得到一个 .pkg 安装包。双击这个文件,按照安装向导的提示进行操作。安装过程非常简单,只需要一直点击“继续”和“安装”按钮即可。安装过程中,系统可能会要求你输入管理员密码,这是正常的。
安装完成后,我们需要验证 Node.js 是否成功安装。打开终端(Terminal)应用程序,你可以通过 Spotlight 搜索“终端”来找到它。在终端中输入以下命令:
|node --version
如果安装成功,你会看到类似 v22.11.0 这样的版本号。接下来,我们还需要检查 npm(Node Package Manager,Node.js 的包管理器)是否也正确安装了:
|npm --version
如果两个命令都能正常显示版本号,那么恭喜你,Node.js 环境已经成功安装完成了!
如果你之前已经安装过 Node.js,但版本比较旧,建议先卸载旧版本,然后再安装新版本,这样可以避免版本冲突的问题。
让我们开始创建项目。首先,务必确保你的电脑上已经安装了 Node.js! 打开终端,运行以下命令:
|npx create-next-app@latest free-education
这个命令会启动一个交互式的设置向导。当系统询问你时,建议选择以下配置:
@/ 作为导入别名)创建完成后,进入项目目录:
|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,但让我们检查一下 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 使用 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" 就可以导入所有功能。
Tailwind CSS 4 的 @import 语法是全新的特性。它简化了配置流程,同时保持了向后兼容性。如果你需要自定义主题,可以使用 @theme 指令,我们会在后续章节中详细介绍。
现在让我们验证一下一切是否正常工作。首先,启动开发服务器:
|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 启动了一个开发服务器。这个服务器提供了许多有用的功能:
现在你已经成功搭建了开发环境,并且验证了 Tailwind CSS 的配置。在下一部分,我们将学习 Next.js 的路由系统,了解如何创建多个页面并实现页面间的导航。
恭喜你完成了第一步!你现在已经掌握了如何创建 Next.js 项目、配置 TypeScript 和 Tailwind CSS 4。这些重复又简单的动作是你日后搭建自己的项目时会不停实践的。