Next.js服务端渲染知识点汇总

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. 路由跳转

【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')}>教师</