详细介绍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 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
AngularJS中的promise用法分析
May 19 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
EsLint入门学习教程
2017/02/17 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
numpy实现RNN原理实现
2021/03/02 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
大学生演讲稿范文
2014/01/11 职场文书
高中生期末评语
2014/01/28 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
捐资助学倡议书
2014/04/15 职场文书
幼师求职自荐信
2014/05/31 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang