服务端渲染框架next.js

nextjs是基于React的服务端渲染框架。

Next.js 拥有一流的“开发者体验”和许多内置功能；其中的一个例子是：

• 一个直观[的基于页面的路由系统，支持动态路由
• 预渲染，静态生成和服务器端渲染均以每页为基础支持
• 自动拆分代码以加快页面加载速度
• 具有优化预取的客户端路由
• 内置 CSS和Sass 支持，并支持任何CSS-in-JS库
• 支持快速刷新的开发环境
• 使用无服务器功能构建 API 端点的
• 完全可扩展

Next.js 用于数以万计的面向生产的网站和 Web 应用程序，其中包括许多世界上最大的网站。

创建next.js应用

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

运行应用

npm run dev

Next.js 中的页面

在 Next.js 中，页面是从pages目录中的文件导出的 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目录内调用的文件：

export default function FirstPost() {
  return <h1>First Post</h1>
}

组件可以有任何名称，但您必须将其导出为default导出。