文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Next.js脚手架完整搭建封装的方法步骤

2024-04-02 19:55

关注

针对实际的开发场景(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)

运行效果

代码实现

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脚手架完整搭建封装的方法步骤的文章就介绍到这了,更多相关Next.js脚手架搭建内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯