Next.js脚手架完整搭建封装实例分析

这篇文章主要介绍“Next.js脚手架完整搭建封装实例分析”，在日常操作中，相信很多人在Next.js脚手架完整搭建封装实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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脚手架完整搭建封装实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！