React的服务端渲染框架Next.js的简介

为什么需要使用Next.js

react/vue/angular: 虽然是单页面应用,但是会导致首屏加载过慢,不利于SEO, Next.js 是一个轻量级的 React 服务端渲染应用框架,用服务端渲染(SSR)可以解决以上两个问题。

Next.js的优点

  • 搭建轻松
  • 自带数据同步 SSR
  • 有丰富的插件 自己形成了生态
  • 灵活的配置

Next.js简单的项目搭建

 使用脚手架进行全局安装
 npm install -g create-next-app
 
 创建Next.js的项目
 $ npx create-next-app next-demo //next-demo是项目名
 
 在浏览器中输入http://localhost:3000/ 检测项目是否生成成功

Next.js的项目结构的介绍

每个页面都是 React 组件(核心~)

  • components文件夹: 用来存放公用的或者有专门用途的组件。
  • node_modules文件夹:Next项目的所有依赖包都在这里,一般我们不用修改和编辑这里的内容。
  • pages文件夹:这里是放置页面的,这里边的内容会自动生成路由,并在服务器端渲染,渲染好后进行数据同步。
  • static文件夹: 这个是静态文件夹,比如项目需要的图片、图标、css文件等静态资源都可以放到这里。

Next.js的路由简介

1.路由的跳转
  有两种路由跳转方式
   // ①标签式跳转
   // 小坑勿踩:  {/* link下边只能有一个根元素,不能有并列的兄弟元素, 所以可以用a标签进行包裹 */}
  import Link from 'next/link';
  A页面
  
  // ②编程式跳转 耦合性比较低
  import Router from 'next/router'; 
   function testRouterDemo(){
    Router.push({
      pathname: '/test'
    })
  }
  
 2. 路由传参
 // 只能使用query?id = 1进行传参    不支持path:id来传参
 ①标签式
  标签式
  
 ② function gotoBlue(){
    Router.push({
      pathname: '/test',
      query: {name: 'one'}
    })
  }
  
  3.路由的接收参数
  使用withRouter组件来进行参数的接收
  import { withRouter} from 'next/router' // 用来接受参数的
  import Link from 'next/link'
  const GetParamCom = ({router})=>{ // 如果不引入withRouter,就没有这个函数里的参数 
        return (
            <>  // 可以使用空标签进行元素的包裹
                
{router.query.name},获取地址栏的参数 .
返回首页 ) } export default withRouter(GetParamCom) // withRouter有着路由技能的装备
 路由的钩子事件
  // routeChangeStart ==> 路由发生变化之前
  // routeChangeComplete ==> 发生结束变化时
  // beforeHistoryChange ==>  浏览器history触发前
  // routeChangeError ==> 路由跳转发生错误的时候
  // hashChangeStart ==> 转变成hash路由模式开始执行
  // hashChangeComplete ===》转变成hash路由模式完成执行

Next.js的getInitialProps静态方法的介绍

当页面初始化加载时,getInitialProps只会加载在服务端。只有当路由跳转(Link组件跳转或 API 方法跳转)时,客户端才会执行getInitialProps。
我们可以简单的理解getInitialProps是react生命周期的扩充,他是Next.js一个的一个伟大的发明,是实现服务端渲染的重要的方法,Next.js 会调用 getInitialProps 来获取数据,然后把获得数据作为 props 来启动 React 组件的原本生命周期。我们不用关心getInitialProps什么时候被调用,这些都可以交给Next.js来完成。

getInitialProps静态方法是用来获取远端数据,这是这个框架的约定,所以我们要遵循框架的约定,不要试图在生命周期中获取远端的数据。
注意:getInitialProps将不能使用在子组件中。只能使用在pages页面中。

 例子:
 const Test = ({list}) => { //因为在getInitialProps这里请求的远程数据的key是list,所以在这个组件中可以直接使用
  return(
    <>
      
{list}
) } Test.getInitialProps = async() => { // 因为请求有时差 所以用异步进行操作 const promise = new Promise((resolve) => { axios('接口请求地址').then( (res) => { console.log('result:', res); resolve(res.data.data); // 获取成功了就告诉resolve,然后把结果返回出去 } ) }) return await promise; } export default Test;

getInitialProps的入参对象的简介

  • pathname - URL 的 path 部分
  • query - URL 的 query 部分,并被解析成对象
  • asPath - 显示在浏览器中的实际路径(包含查询部分),为String类型
  • req - HTTP 请求对象 (只有服务器端有)
  • res - HTTP 返回对象 (只有服务器端有)
  • jsonPageRes - 获取数据响应对象 (只有客户端有)
  • err - 渲染过程中的任何错误
eg.
 Test.getInitialProps = async( { pathname } ) => { 
  const promise = new Promise((resolve) => {
    axios('接口请求地址').then(
      (res) => {
        console.log(pathname) // 可以帮助获取URL的path部分
      }
    )
  })
  return await promise;
}
 

使用style jsx来进行编写css样式

加入了Style jsx代码后,Next.js会自动加入一个随机类名,这样就防止了CSS的全局污染

// next是不支持css文件的
import React, {useState} from 'react';
function Style(){
  const [color, setColor] = useState('blue');
  const changeColor = () => {
    setColor(color === 'blue' ? 'red ' : 'blue');
  }

  return (
    <>
      style jsx
      
{/* 动态的css样式 */} ) } export default Style;

模块的懒加载

  • 懒加载模块(react中模块的理解一般是指的外部库)
  • 一般使用懒加载的场景:不是主要的业务逻辑,所以不用及时去加载这些外部库 所以使用懒加载
我们以外部的moment库作为模板进行测试

import React, {useState}  from 'react';

function Time(){
  const [time, SetTime] = useState(Date.now());
  const formatTime = async() => {
    const moment = await import('moment'); // ① 引入的时候是需要时间的,所以这些外部库 在需要的时候再进入
    SetTime(moment.default(Date.now()).format())
  }

  return (
    <>
     
显示时间为: {time}
// 点击的时候才会去调用外部模块 ) } export default Time;
  • 懒加载自定义组件
import React, {useState}  from 'react';
import dynamic from 'next/dynamic'; // 用来懒加载组件

const CustomCom = dynamic(import('../components/customCom')); // ②只有执行到渲染CustomCom的时候才会加载进来,控制台可以看出来

function CustomComponent(){
  return (
    <>
     
    
  )
}

export default CustomComponent;

如何在Next.js中使用Ant-design UI框架

首要问题是解决Next.js对css的支持问题:

 1. npm install --save @zeit/next-css // 添加相应的包 实现对css的支持
 
 2. 在项目的根目录下创建next.config.js进行相关的配置(配置内容如下)
 
    const withCss = require('@zeit/next-css')
    if(typeof require !== 'undefined'){
        require.extensions['.css']=file=>{}
    }
    
    module.exports = withCss({})
3.重启一下服务,就可以实现在Next中编写css文件了  是不是很开心哇~

按需加载Ant的模块

1. npm install --save babel-plugin-import

2. 安装完成后,在项目根目录建立.babelrc文件,然后写入如下配置文件。

{
    "presets":["next/babel"],  //Next.js的总配置文件,相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件,这个插件就是让antd可以按需引入,包括CSS
        [
            "import",
            {
                "libraryName":"antd",
                "style":"css"
            }
        ]
    ]
}

总结

希望这点简单的介绍 可以给需要的小伙伴带来一点帮助哈~

你可能感兴趣的:(React的服务端渲染框架Next.js的简介)