详细介绍Next.js脚手架完整搭建封装


Posted in Javascript onApril 26, 2022

针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用;

内容包括:
(1)sass样式配置;
(2)axios拦截封装;
(3)action模块化;
(4)reducer模块化;
(5)redux搭建;
(6)dispatch示范;
(7)saga中间件配置;
(8)saga拦截示范;
(9)useEffect异步请求示范;
(10)getServerSideProps/getStaticProps示范;
(11)ssr与csr效果对比;
基本可以做到直接使用,如有特殊的配置需要,大家也可以自行添加即可;
(1)npm install
(2)npm run dev

仓库地址

仓库代码(github)

运行效果

详细介绍Next.js脚手架完整搭建封装

代码实现

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import React, {useEffect, useState } from 'react';
import {useDispatch,useSelector} from 'react-redux'
import fetch from 'node-fetch';
import api from '../http/api';
import {changeUserAC} from "../redux/actions/index"
import axios from 'axios';
import Publish from '../components/common/Publish/Publish';
import { compileString } from 'sass';

const Home: NextPage = (props:any) => {
//异步请求的数据(客户端渲染);
  const [name,setName]=useState<any>("")
  useEffect(()=>{
    (async()=>{
      const res:any =await axios({
        url:"https://api.apiopen.top/getSingleJoke?sid=28654780"
      })
      setName(res.result.name)
      console.log("客户端获取的数据",res);
      console.log("服务端注入的数据",props);
    })();
  },[])
//异步请求的数据(客户端渲染);

  //状态机内部的数据;
  const stateData:any = useSelector<any>(state=>{
    console.log("状态机数据",state);
    return state
  })
  //状态机内部的数据;

  //派发action修改状态机内部的数据;
  const dispatch = useDispatch();
  const changeRedux=()=>{
    dispatch(changeUserAC("李海"))
  } 
  //派发action修改状态机内部的数据;

  //调用封装的axios获取后台数据
  const getData = async () => {
    const res:any = await api.dataManage.GetCollectionData();
    console.log('请求结果',res);
    alert(`请求结果${res.result.name}`)
  };
  //调用封装的axios获取后台数据

  const compareEffect=async()=>{
    window.location.reload()
  }

  //saga拦截
  const goToSaga=()=>{
    dispatch(
      {
        type:'changeUserData',
        payload:'刘利'
      }
    )
  } 
  //saga拦截

  return (
    <>
          <div>
            <p>来自服务端注入预渲染的:{props.data.result.name}</p>
            <p>来自异步请求返回的:{name}</p>
            <p><button onClick={()=>compareEffect()}>对比服务端渲染和客户端渲染效果</button></p>
            <p>来自Redux的数据:{stateData.user.users}</p>
            <p><button onClick={()=>changeRedux()}>派发事件修改redux数据</button></p>
            <p><button onClick={()=>getData()}>调用封装的axios获取后台数据</button></p>
            <p><button onClick={()=>goToSaga()}>通过saga中间件拦截后修改redux数据</button></p>
            <div style={{marginLeft:30,marginTop:30}}><Publish/></div>
          </div>
    </>
  );
}

export async function getServerSideProps() {
  const res = await fetch(`https://api.apiopen.top/getSingleJoke?sid=28654780`)
  const data = await res.json()
  return { props: { data } }
}
// export async function getStaticProps() {
//   const res = await fetch('...')
//   const posts = await res.json()
//   return {
//     props: {
//       return { props: { data } }
//     },
//   }
// }
export default Home

到此这篇关于Next.js脚手架完整搭建封装的方法步骤的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
uniapp 微信小程序 自定义tabBar 导航
Apr 22 #Javascript
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
You might like
PHP 简单日历实现代码
2009/10/28 PHP
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
演讲稿怎么写
2014/01/07 职场文书
打架检讨书50字
2014/01/11 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
司机检讨书
2014/02/13 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
Node.js实现断点续传
2021/06/23 Javascript
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android