SSR服务器端渲染(Next.js总结和豆瓣电影项目)

一.前言

先解释一下Nuxt.js和Next.js虽然只有一个字母之差,但它们是不同的两个服务端渲染框架.

什么是Next.js?

引用Next中文官网的一句话:
Next.js 是一个轻量级的 React 服务端渲染应用框架。

Next.js带来了很多好的特性：

• 默认服务端渲染模式，以文件系统为基础的客户端路由(注意:没有专门路由)
• 代码自动分割使页面加载更快
• 以webpack的热替换（HMR）为基础的开发环境
• 使用React的JSX和ES6的module，模块化和维护更方便
• 可以运行在Express和其他Node.js的HTTP 服务器上
• 可以定制化专属的babel和webpack配置

使用Next服务器端渲染好处：

• 对SEO友好
• 提升在手机及低功耗设备上的性能
• 快速显示首页

二.Next.js学习

按照国际惯例,先来一个hello world应用

先执行创建命令:

mkdir 项目名
cd 项目名
npm init -y
npm i react react-dom next --save
mkdir pages//一定要叫这个名,不能更改

配置package.json中的scripts属性

 "scripts": {
   
    "dev":"next",
    "build":"next build",
    "start":"next start"
  },

在pages文件夹里创建一个index.js页面,简单写点内容:

export default () => {
   
  return (
    <div>
      <p>hello world</p>
    </div>
  )
}

执行npm run dev,出来效果:

页面导航

路由跳转(组件跳转和事件跳转)

Link组件跳转:

1,引入Link组件

import Link from 'next/link';

2.使用
注意点:
路径是用href;
文字里面要用标签包裹(标签可以是a标签或者其他标签都可以,但Link标签里只能写一个其他标签);
给Link标签设置style样式是无效的,因为Link是一个高阶组件(HOC),但我们可以给子元素设置样式.

href属性也可以改为对象写法:

<Link href={
   {
   pathname:"/next-route/teacher"}} >
        <button style={
   {
   color:'red'}}>去教师页面</button>
      </Link>

同时对象写法可以传递query参数过去
代码:

<Link href={
   {
   pathname:"/next-route/teacher",query:{
   id:1}}} >
        <button style={
   {
   color:'red'}}>去教师页面</button>
</Link>

显示效果:

事件路由跳转

第一步:引入Router对象

import Router from "next/router";

第二步:添加跳转事件

留意一下:浏览器输入网址的请求跳转方式network里会请求页面和js,但通过点击跳转的方式只有js,没有再次请求页面.

自定义404页面

直接在pages文件夹里创建一个_error.js页面(只能叫这个名字)

创建公共导航组件(components文件夹)

不要写在pages有路由的文件夹里,在根目录里我们要创建一个单独的components文件夹,写代码如下:

import Link from "next/link"
const Mynav=()=>{
   
    return (
        <div>
          <Link href={
   {
   pathname:"/next-route/teacher",query:{
   }}} >
            <button style={
   {
   color:'red'}}>去教师页面</button>
          </Link>
          <Link href={
   {
   pathname:"/next-route/student",query:{
   }}} >
            <button style={
   {
   color:'red'}}>去学生页面</button>
          </Link>
       
        </div>
      )
}
export default Mynav

在路由主页中引入使用

导航效果就出来了: