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

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

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[