这是我参与「第五届青训营」笔记创作活动的第11天。
什么是Next.js
输入 Next.js，即 React 框架。Next.js 为上述所有问题提供了解决方案。但更重要的是，它会让你和你的团队在构建 React 应用程序时进入成功的陷阱。
Next.js 旨在拥有一流的开发人员体验和许多内置功能，例如：
- 直观的基于页面的路由系统（支持动态路由）
- 预渲染，静态生成(SSG) 和服务器端渲染(SSR) 均支持每页
- 自动代码拆分以加快页面加载速度
- 具有优化预取的客户端路由
- 内置 CSS和Sass 支持，支持任何CSS-in-JS库
- 支持快速刷新的开发环境
- 使用无服务器函数构建 API 端点的API 路由
- 完全可扩展
创建新页面过程
在页面之间导航Next.js中的页面
pages在 Next.js 中，页面是从目录中的文件导出的 React 组件。
页面根据其文件名与路由相关联。例如，在开发中：
- pages/index.js与/路线相关联。
- pages/posts/first-post.js与/posts/first-post路线相关联。
我们已经有了这个pages/index.js文件，所以让我们创建pages/posts/first-post.js来看看它是如何工作的。
创建一个新页面
在.posts_pages
first-post.js在目录中创建一个名为的文件posts，其内容如下：
return <h1>First Post</h1>;
}
链接组件
在网站上的页面之间链接时，您使用HTML标记。
在 Next.js 中，您使用LinkComponent fromnext/link来包装a标签。Link允许您进行客户端导航到应用程序中的不同页面。
客户端导航
该Link组件支持在同一个 Next.js 应用程序中的两个页面之间进行客户端导航。
客户端导航意味着使用 JavaScript进行页面转换，这比浏览器完成的默认导航要快。
这里有一个简单的方法可以验证它：
使用浏览器的开发者工具将backgroundCSS 属性更改html为yellow。
单击链接可在两个页面之间来回切换。
您会看到黄色背景在页面转换之间持续存在。
这表明浏览器没有加载整个页面并且客户端导航正在工作。
个人总结
最后大项目需要用到这一模块，希望继续学习。
