Next.js腳手架完整搭建封裝的方法步驟
針對(duì)實(shí)際的開(kāi)發(fā)場(chǎng)景(SEO優(yōu)化需求),我們直接使用next.js腳手架創(chuàng)建的項(xiàng)目還無(wú)法直接進(jìn)行開(kāi)發(fā),需要再次進(jìn)行配置封裝搭建,這里分享一套自己的完整封裝搭建給有需要的小伙伴使用;
內(nèi)容包括:
(1)sass樣式配置;
(2)axios攔截封裝;
(3)action模塊化;
(4)reducer模塊化;
(5)redux搭建;
(6)dispatch示范;
(7)saga中間件配置;
(8)saga攔截示范;
(9)useEffect異步請(qǐng)求示范;
(10)getServerSideProps/getStaticProps示范;
(11)ssr與csr效果對(duì)比;
基本可以做到直接使用,如有特殊的配置需要,大家也可以自行添加即可;
(1)npm install
(2)npm run dev
倉(cāng)庫(kù)地址
運(yùn)行效果
代碼實(shí)現(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) => { //異步請(qǐng)求的數(shù)據(jù)(客戶(hù)端渲染); 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("客戶(hù)端獲取的數(shù)據(jù)",res); console.log("服務(wù)端注入的數(shù)據(jù)",props); })(); },[]) //異步請(qǐng)求的數(shù)據(jù)(客戶(hù)端渲染); //狀態(tài)機(jī)內(nèi)部的數(shù)據(jù); const stateData:any = useSelector<any>(state=>{ console.log("狀態(tài)機(jī)數(shù)據(jù)",state); return state }) //狀態(tài)機(jī)內(nèi)部的數(shù)據(jù); //派發(fā)action修改狀態(tài)機(jī)內(nèi)部的數(shù)據(jù); const dispatch = useDispatch(); const changeRedux=()=>{ dispatch(changeUserAC("李海")) } //派發(fā)action修改狀態(tài)機(jī)內(nèi)部的數(shù)據(jù); //調(diào)用封裝的axios獲取后臺(tái)數(shù)據(jù) const getData = async () => { const res:any = await api.dataManage.GetCollectionData(); console.log('請(qǐng)求結(jié)果',res); alert(`請(qǐng)求結(jié)果${res.result.name}`) }; //調(diào)用封裝的axios獲取后臺(tái)數(shù)據(jù) const compareEffect=async()=>{ window.location.reload() } //saga攔截 const goToSaga=()=>{ dispatch( { type:'changeUserData', payload:'劉利' } ) } //saga攔截 return ( <> <div> <p>來(lái)自服務(wù)端注入預(yù)渲染的:{props.data.result.name}</p> <p>來(lái)自異步請(qǐng)求返回的:{name}</p> <p><button onClick={()=>compareEffect()}>對(duì)比服務(wù)端渲染和客戶(hù)端渲染效果</button></p> <p>來(lái)自Redux的數(shù)據(jù):{stateData.user.users}</p> <p><button onClick={()=>changeRedux()}>派發(fā)事件修改redux數(shù)據(jù)</button></p> <p><button onClick={()=>getData()}>調(diào)用封裝的axios獲取后臺(tái)數(shù)據(jù)</button></p> <p><button onClick={()=>goToSaga()}>通過(guò)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Next.js使用getServerSideProps進(jìn)行服務(wù)器端渲染demo
- 修復(fù)Next.js中window?is?not?defined方法詳解
- next.js初始化參數(shù)設(shè)置getServerSideProps應(yīng)用學(xué)習(xí)
- Next.js入門(mén)使用教程
- 使用next.js開(kāi)發(fā)網(wǎng)址縮短服務(wù)的方法
- Next.js搭建Monorepo組件庫(kù)文檔實(shí)現(xiàn)詳解
- next.js?getServerSideProps源碼解析
- next.js之getStaticProps?getStaticPaths使用技巧解析
相關(guān)文章
setTimeout()遞歸調(diào)用不加引號(hào)出錯(cuò)的解決方法
用了setTimeout()想實(shí)現(xiàn)遞歸調(diào)用,如果第一個(gè)參數(shù)不加引號(hào)的話(huà),就會(huì)出錯(cuò),下面與大家分享下該如何解決2014-09-09微信小程序使用swiper組件實(shí)現(xiàn)類(lèi)3D輪播圖
在寫(xiě)微信小程序時(shí),有寫(xiě)到實(shí)現(xiàn)3D輪播圖的效果,可以直接使用微信小程序中自帶的組件swiper來(lái)實(shí)現(xiàn)。下面通過(guò)實(shí)例代碼給大家介紹微信小程序輪播圖的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2018-08-08Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹(shù)結(jié)構(gòu)組件實(shí)例解析
本文通過(guò)實(shí)例代碼給大家介紹了Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹(shù)結(jié)構(gòu)組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06精通Javascript系列之?dāng)?shù)值計(jì)算
在JS中如果希望某個(gè)變量包含一個(gè)數(shù)值,那么無(wú)需限定其必須是整數(shù)或者是浮點(diǎn)數(shù),下面來(lái)個(gè)例子2011-06-06小程序?qū)崿F(xiàn)人臉識(shí)別功能(百度ai)
這篇文章主要介紹了小程序?qū)崿F(xiàn)人臉識(shí)別功能(百度ai),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12利用Webpack實(shí)現(xiàn)小程序多項(xiàng)目管理的方法
這篇文章主要介紹了利用Webpack實(shí)現(xiàn)小程序多項(xiàng)目管理的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02前端使用axios實(shí)現(xiàn)下載文件功能的詳細(xì)過(guò)程
項(xiàng)目中經(jīng)常會(huì)遇到需要導(dǎo)出列表內(nèi)容,或者下載文件之類(lèi)的需求,下面這篇文章主要給大家介紹了關(guān)于前端使用axios實(shí)現(xiàn)下載文件功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08