React 服务端渲染框架:Next.js
文章出处: 拉 勾 大前端 高薪训练营
Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.
- 支持两种预渲染方式,静态生成和服务器端渲染.
- 基于页面的路由系统,路由零配置
- 自动代码拆分.优化页面加载速度.
- 支持静态导出,可将应用导出为静态网站.
- 内置CSS-in-JS库styled-jsx
- 方案成熟,可用于生产环境,世界许多公司都在使用
- 应用部署简单,拥有专属部署环境Vercel,也可以部署在其他环境.
一、创建 Next.js 项目
创建: npm init next-app next-guide
运行: npm run dev
访问: localhost:3000
临时安装 create-next- app
用于创建 Next.js
项目。
二、 基于页面的路由系统
1. 创建页面
在Next.js中,页面是被放置在pages文件夹中的React组件.
组件需要被默认导出.
组件文件中不需要引入React.
pages/list.js
export default function List () {
return (
<div>List Page</div>
)
}
访问地址是:http://localhost:3000/list
页面地址与文件地址是对应的关系.
2. 页面跳转
Link 组件默认使用 JavaScript 进行页面跳转.即 SPA 形式的跳转.
如果浏览器中 JavaScript 被禁用.则使用链接跳转.
Link 组件中不应添加除 href 属性以外的属性,其余属性添加到 a 标签上.
Link 组件通过预取(在生产中)功能自动优化应用程序以获得最佳性能.
import Link from 'next/link'
export default function Home() {
return <div>
Index Page works
<Link href="/list"><a>Jump to List Page</a></Link>
</div>
}
三、静态资源、元数据和 CSS
1. 静态资源
应用程序根目录中的 public 文件夹用于提供静态资源。
通过以下形式进行访问:
public/images/1.jpg -> /images/1.jpg
public/css/base.css -> /css/base.css
2. 修改页面元数据
通过 Head 组件修改元数据
import Head from 'next/head'
<>
<Head>
<title>next app</title>
</Head>
</>
3. CSS 样式
3.1 内置 styled-jsx
在 Next.js 中 内置了 styled-jsx, 它是一个 CSS-in-JS 库,允许在 React 组件中编写 CSS, CSS 仅作用于组件内部。
export default function Home() {
return <>
<Head>
<title>Index Page</title>
</Head>
<div>
Index Page works
<Link href="/list"><a className="demo">Jump to List Page</a></Link>
<img src="/images/1.jpeg" height