学习地址1：https://pan.baidu.com/s/1NuAM7DwRqo8n6dolWBuvqA 提取码：oajo
学习地址2：https://pan.baidu.com/s/1dy3rSEPXjq9PA8fRhC6OQw 提取码：jxjk
Next.js 是一个使用 React 构建单页应用程序（SPA）的开源 JavaScript 框架。它使得构建服务端渲染（SSR）和静态网站生成（SSG）的 React 应用程序变得简单和高效。Next.js 由 Vercel（原 Zeit）公司开发，并且自推出以来得到了广泛的关注和使用。
Next.js 提供了一系列的特性和优势，包括但不限于：
1、服务端渲染（SSR）：每次页面请求时，都在服务器上实时渲染页面，这有助于提高首屏加载速度并改善搜索引擎优化（SEO）。
2、静态网站生成（SSG）：在构建时生成静态的 HTML 页面，可以部署到任何静态网站托管服务上，进一步提高性能和扩展性。
3、文件系统路由：Next.js 通过 /pages 目录中的文件结构自动创建路由，每个 React 组件文件对应一个路由。
4、自动代码拆分：Next.js 会自动对每个页面进行代码拆分，只加载当前页面所需的代码，这有助于减少页面的加载时间。
5、API 路由：可以在 /pages/api 目录下创建 API 路由，方便构建 API 接口。
6、内置 CSS 和 Sass 支持：Next.js 支持 CSS Modules，并内置了对 CSS-in-JS 库的支持，同时也支持预处理器如 Sass。
7、开箱即用的 TypeScript 支持：Next.js 提供了对 TypeScript 的内置支持，无需额外的配置。
8、插件生态系统：社区提供了大量的 Next.js 插件，可以很容易地扩展应用的功能。
为什么学习Next.js，对于前端开发者来说是一个明智的选择
简化路由：Next.js的文件系统基础路由让开发者轻松定义页面和链接之间的关系。你无需额外配置，仅通过文件结构就能自动获得强大的路由功能。
API路由：Next.js允许你在同一个项目中创建API路由，这意味着你可以构建前后端紧密集成的应用程序，无需担心跨域请求或配置复杂的后端服务。
双重渲染优势：无论是客户端渲染还是服务端渲染，Next.js都能提供支持，让你根据项目需求和页面特性选择最合适的渲染方式。
数据获取：Next.js提供了静态生成和服务端渲染的数据获取方法，如getStaticProps和getServerSideProps，让数据管理变得简单高效。
样式方便：Next.js支持CSS模块，使得组件级样式变得简单，同时也支持其他流行的CSS-in-JS库，如styled-components，让你能以更灵活的方式定义样式。
优化：Next.js对图片、表单和脚本提供了自动优化，比如图片懒加载和自动压缩，提升了网站的性能和加载速度。
开发和生产构建系统：Next.js提供了针对开发和生产环境优化的构建系统，使得部署和测试变得更加高效。
Next.js 提供了许多优点和功能：
1、服务端渲染 (SSR) 和预渲染 (SSG) ：Next.js 支持服务端渲染和预渲染，这意味着页面在服务器端生成，而不是在客户端。这有助于提高网页的加载速度和搜索引擎优化（SEO），同时也提供更好的首次渲染体验。
2、快速加载时间：由于 Next.js 支持预渲染和服务端渲染，用户可以更快地看到页面内容，因为大部分工作在服务器端完成，减少了客户端加载所需的时间。
3、热模块替换 (HMR) ：Next.js 支持热模块替换，这意味着在进行开发时，您可以在保持应用程序运行的同时修改代码，并立即看到变化，无需刷新页面。
4、简单的部署：Next.js 的默认配置使得应用程序的部署非常简单。您可以使用 Vercel、Netlify 等平台将应用程序快速部署到云端，或者将其部署到自己的服务器上。
5、丰富的生态系统：Next.js 是一个非常受欢迎的框架，拥有庞大的社区和丰富的插件，扩展和工具支持。这使得开发人员能够轻松解决常见问题，并快速构建复杂的 web 应用程序。
6、自动优化：Next.js 内置了许多优化功能，包括自动压缩和缓存等，这些功能有助于提高应用程序的性能和用户体验。
7、支持多种数据获取方法：Next.js 提供了多种数据获取方式，如 getServerSideProps 和 getStaticProps，使得获取数据变得简单和灵活。
在服务器上使用 fetch 获取数据
Next.js 扩展了原生的 fetch Web API，允许你为服务器上的每个 fetch 请求配置缓存和重新验证行为。React 扩展了 fetch，以便在渲染 React 组件树时自动存储 fetch 请求。
在服务器组件、路由处理程序和服务器操作中，可以将 fetch 与 async/await 一起使用
// app/page.tsx
async function getData() {
const res = await fetch('https://api.example.com/...')
// 返回值是 *not* 序列化的
// 你可以返回 Date、Map、Set等
if (!res.ok) {
// 这将激活最接近的 `error.js` 错误边界
throw new Error('Failed to fetch data')
}
return res.json()
}
export default async function Page() {
const data = await getData()
return <main></main>
}
有疑问加站长微信联系（非本文作者）
