Next.js
Next.js是一个基于React的服务端渲染框架。它使用react语法,可以很好的实现代码的模块化,有利于代码的开发和维护。
Next.js的特性:
- 默认服务端渲染模式,以文件系统为基础的客户端的路由
- 代码自动分割使页面加载更快
- 以webpack的热更新HMR为基础的开发环境
- 使用React的JSX和ES6的module,模块化和维护更方便
- 可以运行在express和其他Node.js的Http服务器上
- 可以定制化专属的babel和webpack配置
使用服务端渲染的好处:
- 对SEO友好
- 提升在手机以及低功耗设备上的性能
- 快速显示首页
一、安装以及体验
mkdir hello-next
cd hello-next
npm init -y
npm install --save react react-dom next
mkdir pages
配置package.json中的script属性
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
此时,如果运行npm run dev
会得到一个404页面。
创建一个pages/index.js
const Index = () => (
<div> <p> Hello Next.js</p> </div>
)
export default Index
再次运行就得到这个首页了。
二、页面导航
【1】link组件
link组件内不能直接写文字,必须使用标签包裹,标签可以是任何标签,但是必须只有一个子元素;
给link组件设置样式不会生效,因为link组件是一个HOC高阶组件,但是可以给它里面的子元素设置样式。
import Link from 'next/link'
<Link href="/teachers">
<a style={
{
color:'red',marginRight: '20px'}}> 教师页面 </a>
</Link>
link组件可以接收URL对象,而且它会自动格式化生成URL字符串。例如:
import Link from 'next/link'
<Link href={
{
pathname:'/teachers',query: {
id: 1}}}>
<a> 教师页面 </a>
</Link>
【2】命名式路由
import Router from 'next/router'
export default () => (
<div><span onclick={
()=> Router.push('/teachers')}>教师