Next.js腳手架完整搭建封裝的方法步驟
針對實(shí)際的開發(fā)場景(SEO優(yōu)化需求),我們直接使用next.js腳手架創(chuàng)建的項(xiàng)目還無法直接進(jìn)行開發(fā),需要再次進(jìn)行配置封裝搭建,這里分享一套自己的完整封裝搭建給有需要的小伙伴使用;
內(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
倉庫地址
運(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) => { //異步請求的數(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)機(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獲取后臺數(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)文章希望大家以后多多支持腳本之家!
- 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入門使用教程
- 使用next.js開發(fā)網(wǎng)址縮短服務(wù)的方法
- Next.js搭建Monorepo組件庫文檔實(shí)現(xiàn)詳解
- next.js?getServerSideProps源碼解析
- next.js之getStaticProps?getStaticPaths使用技巧解析
相關(guān)文章
setTimeout()遞歸調(diào)用不加引號出錯的解決方法
用了setTimeout()想實(shí)現(xiàn)遞歸調(diào)用,如果第一個參數(shù)不加引號的話,就會出錯,下面與大家分享下該如何解決2014-09-09微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
在寫微信小程序時,有寫到實(shí)現(xiàn)3D輪播圖的效果,可以直接使用微信小程序中自帶的組件swiper來實(shí)現(xiàn)。下面通過實(shí)例代碼給大家介紹微信小程序輪播圖的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2018-08-08Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件實(shí)例解析
本文通過實(shí)例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06利用Webpack實(shí)現(xiàn)小程序多項(xiàng)目管理的方法
這篇文章主要介紹了利用Webpack實(shí)現(xiàn)小程序多項(xiàng)目管理的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02前端使用axios實(shí)現(xiàn)下載文件功能的詳細(xì)過程
項(xiàng)目中經(jīng)常會遇到需要導(dǎo)出列表內(nèi)容,或者下載文件之類的需求,下面這篇文章主要給大家介紹了關(guān)于前端使用axios實(shí)現(xiàn)下載文件功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08