快捷導(dǎo)航

Next.js腳手架完整搭建封裝的方法步驟

更新時間：2022年04月26日 14:31:27 作者：dingdang

本文主要介紹了Next.js腳手架完整搭建封裝的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

針對實際的開發(fā)場景(SEO優(yōu)化需求),我們直接使用next.js腳手架創(chuàng)建的項目還無法直接進行開發(fā),需要再次進行配置封裝搭建,這里分享一套自己的完整封裝搭建給有需要的小伙伴使用;

內(nèi)容包括:
(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)

運行效果

代碼實現(xiàn)

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) => {
//異步請求的數(shù)據(jù)(客戶端渲染);
  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("客戶端獲取的數(shù)據(jù)",res);
      console.log("服務(wù)端注入的數(shù)據(jù)",props);
    })();
  },[])
//異步請求的數(shù)據(jù)(客戶端渲染);

  //狀態(tài)機內(nèi)部的數(shù)據(jù);
  const stateData:any = useSelector<any>(state=>{
    console.log("狀態(tài)機數(shù)據(jù)",state);
    return state
  })
  //狀態(tài)機內(nèi)部的數(shù)據(jù);

  //派發(fā)action修改狀態(tài)機內(nèi)部的數(shù)據(jù);
  const dispatch = useDispatch();
  const changeRedux=()=>{
    dispatch(changeUserAC("李海"))
  } 
  //派發(fā)action修改狀態(tài)機內(nèi)部的數(shù)據(jù);

  //調(diào)用封裝的axios獲取后臺數(shù)據(jù)
  const getData = async () => {
    const res:any = await api.dataManage.GetCollectionData();
    console.log('請求結(jié)果',res);
    alert(`請求結(jié)果${res.result.name}`)
  };
  //調(diào)用封裝的axios獲取后臺數(shù)據(jù)

  const compareEffect=async()=>{
    window.location.reload()
  }

  //saga攔截
  const goToSaga=()=>{
    dispatch(
      {
        type:'changeUserData',
        payload:'劉利'
      }
    )
  } 
  //saga攔截

  return (
    <>
          <div>
            <p>來自服務(wù)端注入預(yù)渲染的:{props.data.result.name}</p>
            <p>來自異步請求返回的:{name}</p>
            <p><button onClick={()=>compareEffect()}>對比服務(wù)端渲染和客戶端渲染效果</button></p>
            <p>來自Redux的數(shù)據(jù):{stateData.user.users}</p>
            <p><button onClick={()=>changeRedux()}>派發(fā)事件修改redux數(shù)據(jù)</button></p>
            <p><button onClick={()=>getData()}>調(diào)用封裝的axios獲取后臺數(shù)據(jù)</button></p>
            <p><button onClick={()=>goToSaga()}>通過saga中間件攔截后修改redux數(shù)據(jù)</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

到此這篇關(guān)于Next.js腳手架完整搭建封裝的方法步驟的文章就介紹到這了,更多相關(guān)Next.js腳手架搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: