In view of the actual development scenario (SEO optimization needs), the project created by us directly using the scaffolding of next. Js is still unable to carry out complete and efficient development, so we need to carry out configuration and packaging construction again. Here we share a set of our own complete packaging construction for those who need it.

Contents include: (1) SASS style configuration; (2) Axios interception encapsulation; (3) Action modular; (4Reducer; (5) redux setup. (6) dispatch model; (7Saga middleware configuration; (8) Saga interception demonstration; (9UseEffect Asynchronous request demonstration; (10) getServerSideProps/getStaticProps demonstration; (11) comparison of SSR and CSR effects; Basic can do direct use, if there is a special configuration needs, you can also add it; (1)npm install
(2)npm run dev
Copy the code

The warehouse address

Repository code (Github) Repository code (Gitee)

Running effect

Code implementation

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) = > {
// Asynchronously requested data (client rendering);
  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("Data obtained by client",res);
      console.log("Server-side injected data",props); }) (); }, [])// Asynchronously requested data (client rendering);

  // State machine internal data;
  const stateData:any = useSelector<any>(state= >{
    console.log("State machine data",state);
    return state
  })
  // State machine internal data;

  // Issue action to modify the internal data of the state machine;
  const dispatch = useDispatch();
  const changeRedux=() = >{
    dispatch(changeUserAC("Li hai"))}// Issue action to modify the internal data of the state machine;

  // Call wrapped AXIos to get background data
  const getData = async() = > {const res:any = await api.dataManage.GetCollectionData();
    console.log('Request result',res);
    alert('Request result${res.result.name}`)};// Call wrapped AXIos to get background data

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

  / / saga intercept
  const goToSaga=() = >{
    dispatch(
      {
        type:'changeUserData'.payload:'bass'})}/ / saga intercept

  return (
    <>
          <div>
            <p>Injection of pre-rendered :{props.data.result.name} from the server</p>
            <p>From an asynchronous request :{name}</p>
            <p><button onClick={()= >CompareEffect ()}> Compare server-side and client-side rendering effects</button></p>
            <p>Data from Redux :{statedata.user.users}</p>
            <p><button onClick={()= >ChangeRedux ()}> Send events to modify redux data</button></p>
            <p><button onClick={()= >GetData ()}> calls the wrapped AXIos to get background data</button></p>
            <p><button onClick={()= >GoToSaga ()}> Modify redux data after interception with saga middleware</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
Copy the code