Next.js项目实战-ai助手帮我写文章发布视频第1节(共89节)

news2025/3/8 20:38:29

😂Ai在国内外已经杀疯了，老板要求我们把速度再提升快一些，哪怕是几秒，几百毫秒也行～现在，马上就要，就地就要，只好搬出前端服务端(大保健)😓。没错，今天我要分享的就是服务端渲染，主要是Next.js。Ai的热火朝天貌似把我们这些程序员的角色淡化，其实不然，还是熟悉的味道，只是科技在进步并更好的服务于我们开发者。不了解Next.js可以去官网看下。

一、选型对比

在开始之前我们先看一下Next.js与Nuxt.js的对比分析，帮助您在两者之间做出选择：

框架	类型	技术栈	核心目标
Next.js	前端框架	React	构建React应用，支持SSR、静态站点等
Nuxt.js	前端框架	Vue.js	构建Vue.js应用，支持SSR、静态站点等

核心功能对比

Next.js

基于React：专为React生态系统设计，扩展了React的功能。
服务端渲染（SSR）：提升SEO和首屏加载速度。
静态站点生成（SSG）：预渲染页面，适合博客、文档等。
约定式路由：根据文件结构自动生成路由。
模块化：通过插件扩展功能（如状态管理、API集成）。
渐进式页面：支持渐进式加载，提升用户体验。
中间件支持：如API路由、定制错误页面等。

Nuxt.js

基于Vue.js：专为Vue生态系统设计，扩展了Vue的功能。
服务端渲染（SSR）：提升SEO和首屏加载速度。
静态站点生成（SSG）：预渲染页面，适合博客、文档等。
约定式路由：根据文件结构自动生成路由。
模块化：通过插件扩展功能（如状态管理、API集成）。
Vue Composition API：支持Vue 3的Composition API，提升代码可维护性。

适用场景

框架	适用场景
Next.js	React项目、SEO敏感的网站（如企业官网、博客）、需要渐进式加载的页面
Nuxt.js	Vue项目、SEO敏感的网站（如企业官网、博客）、需要Vue 3 Composition API的项目

技术特点对比

特性	Next.js	Nuxt.js
核心语言	JavaScript/React	JavaScript/Vue
渲染模式	SSR/SSG/SPA	SSR/SSG/SPA
路由	文件系统约定	文件系统约定
数据获取	`getStaticProps`/`getServerSideProps`	`asyncData`/`fetch`
状态管理	集成Redux等	集成Vuex等
构建工具	内置Webpack配置	内置Webpack配置
生态支持	React生态	Vue生态

如何选择？

技术栈：
- 如果您的团队更熟悉 React，选择 Next.js。
- 如果您的团队更熟悉 Vue，选择 Nuxt.js。
项目需求：
- 如果项目需要 渐进式加载 或复杂的中间件功能，Next.js 更适合。
- 如果项目需要 Vue 3 Composition API 或更简单的状态管理，Nuxt.js 更适合。
生态系统：
- Next.js 有丰富的React生态支持。
- Nuxt.js 有丰富的Vue生态支持。

总结

Next.js 和 Nuxt.js 都是各自生态系统中非常优秀的框架，选择取决于您的技术栈和项目需求。

二、项目搭建

创建项目

直接执行命令，拥抱TS：

npx create-next-app@latest --typescript

在一系列选择Yes/No后，你会得到如图目录结构：

这里介绍下Turbopack：

‌

Turbopack‌是由Webpack的创建者Tobias Koppers和Next.js团队使用Rust编写的一个增量打包工具，旨在提供更快的构建速度和更好的开发体验。Turbopack特别针对JavaScript和TypeScript进行优化，支持所有ESNext功能、Browserslist和顶层await等特性。它还支持require、import、动态导入等多种导入方式，并且优化了开发服务器（Dev Server），支持热更新（HMR）和快速刷新‌。turbopack的构建速度非常快，特别是在大型应用中表现尤为突出。在具有3000个模块的应用中，Turbopack的启动时间仅为1.8秒，而Vite则需要11.4秒，这表明Turbopack比Vite快5.8倍，比Webpack快700倍‌12。此外，Turbopack在代码更新速度上也表现出色，文件更改的速度比Vite快5.8倍‌。

架构和技术特点

Turbopack建立在新的增量架构上，借鉴了Turborepo和Google Bazel等工具的经验教训，专注于使用缓存来做两次相同的工作。它建立在Turbo之上，一个开源的、增量的Rust记忆框架，能够缓存程序中任何函数的结果，从而在函数输入未更改时跳过大量工作‌。

开发环境和社区支持

目前，Turbopack仍处于alpha阶段，不支持配置和插件。尽管如此，它的开箱即用特性已经涵盖了JavaScript、TypeScript、Imports、Dev Server、CSS和静态资源等多方面的支持‌1。随着技术的不断成熟，Turbopack有望在未来提供更丰富的功能和更好的开发体验.

页面路由

Next.js 是围绕着页面（pages）的概念构造的。一个页面（page）就是一个从 pages 目录下的 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。

页面（page）根据其文件名与路由关联。例如，pages/about.js 被映射到 /about。甚至可以在文件名中添加动态路由参数，例如，如果你创建了一个命名为 pages/posts/[id].js 的文件，那么就可以通过 posts/1、posts/2 等类似的路径进行访问。