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腳手架完整搭建封裝實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！