从 create-next-app 到第一个可用页面：Sigma-Web-Dev-Course 的 Next.js 项目启动全指南-平芜编程栈

从 create-next-app 到第一个可用页面：Sigma-Web-Dev-Course 的 Next.js 项目启动全指南

【免费下载链接】Sigma-Web-Dev-CourseSource Code for Sigma Web Development Course项目地址: https://gitcode.com/GitHub_Trending/si/Sigma-Web-Dev-Course

本文围绕 Sigma-Web-Dev-Course 仓库中 Video 121/first 这个入门项目展开，讲解如何通过 create-next-app 脚手架创建 Next.js 应用、启动开发服务器、理解 App Router 目录结构，并掌握文件路由、全局布局与 Tailwind CSS 的协同工作方式。读完本文，你将能够独立创建一个多页面 Next.js 项目，并读懂其核心配置文件。

项目背景：这是课程的第 121 个视频项目

在 Sigma Web Development Course 的视频教程体系中，Video 121/first 是学员接触 Next.js 的第一个实战项目。仓库中的 README.md 明确说明，这是一个通过create-next-app引导（bootstrapped）生成的 Next.js 项目。与仓库中较早的视频（如 Video 105～120 的 Vite + React 项目、Video 121 之前的纯前端 HTML 项目）相比，这个项目标志着课程从"前端框架"进入"全栈框架"阶段：Next.js 同时覆盖客户端渲染与服务端能力。

从 package.json 可以看到项目的核心依赖版本：

next: 14.1.0（App Router 时代的稳定版本）
react/react-dom: ^18
开发依赖：tailwindcss^3.3.0、postcss^8、autoprefixer^10、eslint^8 与eslint-config-next14.1.0

启动开发服务器：第一条命令让应用跑起来

README 给出了最核心的启动方式。进入项目目录后，运行以下任一命令即可启动开发服务器：

npm run dev # 或 yarn dev # 或 pnpm dev # 或 bun dev

这些命令之所以能直接生效，是因为 package.json 的scripts字段已经预置了四个标准命令：

命令	作用
`npm run dev`	启动开发服务器（对应`next dev`），带热更新
`npm run build`	构建生产版本（对应`next build`）
`npm run start`	启动生产服务器（对应`next start`，需先 build）
`npm run lint`	运行 ESLint 检查（对应`next lint`）

启动成功后，在浏览器中打开 http://localhost:3000 即可看到结果。这是 Next.js 开发服务器的默认端口，若端口被占用，Next.js 会自动尝试下一个可用端口并在终端提示。

认识 App Router：目录即路由

这是本项目最重要的架构概念。打开 app 目录，你会看到以下结构：

app/ ├── about/ │ └── page.js # 对应路由 /about ├── contact/ │ └── page.js # 对应路由 /contact ├── favicon.ico ├── globals.css ├── layout.js # 全局布局 └── page.js # 对应路由 /

这就是 Next.js 14 的App Router 文件路由机制：目录名决定 URL 路径，page.js是路由页面的唯一入口文件。在本项目中：

app/page.js 对应首页/，渲染内容为 "I am homepage"
app/about/page.js 对应/about，是一个列表页
app/contact/page.js 对应/contact，渲染内容为 "I am contact"

值得留意的是 app/about/page.js 的内容，它用列表形式总结了 Next.js 解决的问题，正好可以作为学习路标：

Full Stack Solution（全栈解决方案）
File based Routing（文件路由）
Additional features like router from next/navigation（如next/navigation中的 router 等附加能力）
Optimized rendering（优化渲染）

热更新：改完即生效的开发体验

README 强调："You can start editing the page by modifyingapp/page.js. The page auto-updates as you edit the file."

这背后是next dev自带的 Fast Refresh（快速刷新）机制。当你修改 app/page.js 时，无需手动刷新浏览器，页面会自动更新；且该机制会尽量保留组件本地状态，只替换被修改的模块。这也是npm run dev与npm run build && npm run start生产流程最直观的差异——开发环境优先响应速度，生产环境优先性能与稳定。

可以动手验证：把 app/page.js 中的 "I am homepage" 改成任意文本，保存后浏览器中的首页会立即变化。

全局布局与共享组件：layout.js 与 Navbar

一个容易被新手忽略但极为重要的文件是 app/layout.js。它是根布局（Root Layout），包裹着所有页面：

import { Inter } from "next/font/google"; import "./globals.css"; import Navbar from "@/component/Navbar"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "Blog", description: "I am a blog", }; export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}> <Navbar/> {children} </body> </html> ); }

这个文件揭示了三件关键事实：

{children}插槽机制：每个页面的内容会被注入到根布局的children位置，因此布局中写一次<Navbar/>，/、/about、/contact所有页面都会自动带上导航栏。
metadata导出：Next.js 约定导出metadata对象即可设置页面的<title>与<meta name="description">，本项目示例中标题为 "Blog"。
路径别名@/：Navbar.js 被放在根目录的component/文件夹（注意不是 App Router 约定的components/），并通过@/component/Navbar导入。这个@/别名由 jsconfig.json 配置：

{ "compilerOptions": { "paths": { "@/*": ["./*"] } } }

即在 JS 代码中，@/component/Navbar等价于项目根目录下的component/Navbar，避免书写冗长的相对路径。

而 Navbar.js 本身目前只是一个占位组件，返回 "I am navbar"，为后续课程引入next/link和next/navigation的路由跳转预留了位置。

样式体系：Tailwind CSS 与 next/font 字体优化

本项目同时集成了 Tailwind CSS 与 next/font 两套样式能力。

Tailwind CSS 的接入方式由三层配置共同完成：

postcss.config.js 注册tailwindcss与autoprefixer两个 PostCSS 插件；
tailwind.config.js 声明内容扫描路径，让 Tailwind 知道从哪些文件提取类名：

module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], // ... };

app/globals.css 通过三行指令引入 Tailwind 的原子样式层，并额外定义了随prefers-color-scheme明暗模式切换的 CSS 变量配色。

next/font是 README 中特别提到的能力：Next.js 内置的字体优化方案。在 app/layout.js 中，通过next/font/google导入 Inter 字体：

import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"] });

next/font会在构建时自动下载、自托管字体文件，并使用 CSSfont-display: swap策略避免布局偏移（layout shift），同时消除了传统外链 Google Fonts 带来的额外网络请求。把inter.className挂到<body>上，即可让整站文字使用该字体。

配置文件一览：读懂脚手架的"隐藏机关"

除了上述文件，脚手架还生成了两个容易被忽略的配置文件：

next.config.mjs：Next.js 主配置文件，当前为空对象，表示全部使用默认配置。后续如需自定义重写（rewrites）、环境变量注入或实验特性，都在这里声明。
tailwind.config.js：除内容扫描路径外，还预置了gradient-radial与gradient-conic两个渐变背景工具类，供页面按需使用。

从运行到部署：完整的命令工作流

README 最后部分涉及部署。完整的项目生命周期命令如下：

# 开发阶段：热更新 + 错误提示 npm run dev # 构建生产版本：输出优化后的静态资源与服务端产物 npm run build # 以生产模式启动（需先执行 build） npm start # 代码质量检查 npm run lint

npm run build与npm run dev最直观的区别在于：build 会生成.next目录下的优化产物（包括静态生成页面、预渲染 HTML 与资源指纹），而 dev 模式下这些优化被刻意关闭以保证响应速度。

小结

通过 Video 121/first 这个最小项目，你已经掌握了 Next.js 全栈开发的入门闭环：用npm run dev启动、用 App Router 文件结构组织页面、用layout.js管理全局布局、用@/别名组织导入、用 Tailwind 与 next/font 处理样式。这套骨架正是 Sigma Web Development Course 后续 Next.js 章节（认证、API 路由、Server Actions 等）的共同地基，建议在继续后续视频前，先动手修改 app/page.js 与 component/Navbar.js，把本章的每个机制亲手验证一遍。

【免费下载链接】Sigma-Web-Dev-CourseSource Code for Sigma Web Development Course项目地址: https://gitcode.com/GitHub_Trending/si/Sigma-Web-Dev-Course

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考