从 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 105120 的 Vite React 项目、Video 121 之前的纯前端 HTML 项目相比这个项目标志着课程从前端框架进入全栈框架阶段Next.js 同时覆盖客户端渲染与服务端能力。从 package.json 可以看到项目的核心依赖版本next: 14.1.0App 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 buildnpm run start启动生产服务器对应next start需先 buildnpm 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 homepageapp/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 langen body className{inter.className} Navbar/ {children} /body /html ); }这个文件揭示了三件关键事实{children}插槽机制每个页面的内容会被注入到根布局的children位置因此布局中写一次Navbar//、/about、/contact所有页面都会自动带上导航栏。metadata导出Next.js 约定导出metadata对象即可设置页面的title与meta namedescription本项目示例中标题为 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.mjsNext.js 主配置文件当前为空对象表示全部使用默认配置。后续如需自定义重写rewrites、环境变量注入或实验特性都在这里声明。tailwind.config.js除内容扫描路径外还预置了gradient-radial与gradient-conic两个渐变背景工具类供页面按需使用。从运行到部署完整的命令工作流README 最后部分涉及部署。完整的项目生命周期命令如下# 开发阶段热更新 错误提示 npm run dev # 构建生产版本输出优化后的静态资源与服务端产物 npm run build # 以生产模式启动需先执行 build npm start # 代码质量检查 npm run lintnpm 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），仅供参考