这篇文章主要介绍“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脚手架完整搭建封装实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
