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
导出。