Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

說(shuō)明

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、山陽(yáng)ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的山陽(yáng)網(wǎng)站制作公司

實(shí)現(xiàn) 路由跳轉(zhuǎn)、redux

文件版本

“next”: “^4.2.3”,
“react”: “^16.2.0”,
“react-dom”: “^16.2.0”

Next.js GitHub 文檔

項(xiàng)目源碼

使用

Next.js 使用文件體統(tǒng)作為API，可以自動(dòng)進(jìn)行服務(wù)器端渲染和代碼分割

1. 安裝

yarn add next react react-dom

2. package.json 中添加 npm script

 "scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
 },

3. 創(chuàng)建 /pages 文件夾，其中文件會(huì)映射為路由

/pages 文件夾是頂級(jí)組件文件夾其中 /pages/index.js 文件會(huì)映射文 / 路由，其他文件根據(jù)文件名映射

目錄結(jié)構(gòu)	映射路由
/pages/index.js	/
/pages/about.js	/about
/pages/home/index.js	/home
/pages/home/about.js	/home/about

每一個(gè)路由js文件都會(huì) export 一個(gè) React 組件，這個(gè)組件可以是函數(shù)式的也可以是通過(guò)集成 React.Component 得到的類

export default () => this is index page 
;

4. 創(chuàng)建 /static 文件夾，存放靜態(tài)資源

靜態(tài)資源文件夾文件會(huì)映射到 /static/ 路由下，直接通過(guò) http://localhost:3000/static/test.png 訪問(wèn)

5. 使用內(nèi)置組件定制每個(gè)頁(yè)面的 head 部分

  import Head from 'next/head'; // 引入內(nèi)置組件

  export default () => (
    
     
       index page
       
     
     this is index page
    
  );

6. 使用內(nèi)置組件進(jìn)行路由跳轉(zhuǎn)

  import Link from 'next/link';

  export default () => (
    
     this is home index page
     
        to about page
     
    
  );

更多 Link 使用方式

import React, {Component} from 'react';
import Link from 'next/link';

export default class About extends Component {
  constructor(props) {
   super(props);
  }
  render() {
   // href 值可以是一個(gè)對(duì)象
   const href = {
     pathname: '/home',
     query: {name: 'test'}
   };

   return (
    
      this is about page 
      
      {/* replace 覆蓋歷史跳轉(zhuǎn) */}
      
      click to home index page
      
     
   );
  }
}

7. 使用內(nèi)置 router 方法，手動(dòng)觸發(fā)路由跳轉(zhuǎn)

next/router 提供一套方法和屬性，幫助確認(rèn)當(dāng)前頁(yè)面路由參數(shù)，和手動(dòng)觸發(fā)路由跳轉(zhuǎn)

  import router from 'next/router';
  /*
    router.pathname ==> /home
    router.query ==> {}
    router.route - 當(dāng)前路由
    asPath - 顯示在瀏覽器地址欄的實(shí)際的路由
    push(url, as=url) - 跳轉(zhuǎn)頁(yè)面的方法
    replace(url, as=url) - 跳轉(zhuǎn)頁(yè)面
  */

更好的方式使用路由 – router 的 withRouter 方法

import Link from 'next/link';
import {withRouter} from 'next/router';

const Home = (props) => {
  // 這里的 props 會(huì)得到 {router, url} 兩個(gè)屬性
  // router: {push: ƒ, replace: ƒ, reload: ƒ, back: ƒ, prefetch: ƒ, …}
  // url: {query: {…}, pathname: "/home", asPath: "/home?name=test", back: ƒ, push: ƒ, …}
  console.log(props);
  return (
   
     this is home index page 
     {/* 
       to about page
      */}
   
  );
}

export default withRouter(Home);

8. 使用 next-redux-wrapper 插件輔助實(shí)現(xiàn) redux

1. 安裝依賴

sudo yarn add next-redux-wrapper redux react-redux redux-devtools-extension redux-thunk

2. 創(chuàng)建 initializeStore.js 一個(gè)可以返回 store 實(shí)例的函數(shù)

在這個(gè)文件中會(huì)完成裝載中間件、綁定reducer、鏈接瀏覽器的redux調(diào)試工具等操作

  import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from 'redux-devtools-extension'; 
  import thunk from 'redux-thunk';
  import reducer from '../modules/reducers';

  const middleware = [thunk];
  const initializeStore = initialState => {
    return createStore(
       reducer, 
       initialState, 
       composeWithDevTools(applyMiddleware(...middleware))
     );
  };

  export default initializeStore;

3. 創(chuàng)建 reducer , action

與普通 react-redux 項(xiàng)目創(chuàng)建 reducer, action 的方法一致，我把這部分代碼都提取到一個(gè)名為 modules的文件夾中

  // /modules/reducers.js
  import { combineReducers } from 'redux';
  import about from './about/reducer';

  // 合并到主reducer
  const reducers = {
    about
  };

  // combineReducers() 函數(shù)用于將分離的 reducer 合并為一個(gè) reducer 
  export default combineReducers(reducers);

  // /modules/about/reudcer.js 
  // /about 頁(yè)面的 reducer
  import {
    CHANGE_COUNT
  } from '../types-constant';

  const initialState = {
    count: 0
  };

  const typesCommands = {
    [CHANGE_COUNT](state, action) {
     return Object.assign({}, state, { count: action.msg });
    },
  }

  export default function home(state = initialState, action) {
    const actionResponse = typesCommands[action.type];

    return actionResponse ? actionResponse(state, action) : state;
  }

  // /modules/about/actions.js
  // /about 頁(yè)面的 action
  import {
    CHANGE_COUNT
  } from '../types-constant';

  export function changeCount(newCount) {
    return {
     type: CHANGE_COUNT,
     msg: newCount
    };
  }

4. 頁(yè)面中使用

需要用到 next-redux-wrapper 提供的 withRedux 高階函數(shù)，以及 react-redux 提供的 connect 高階函數(shù)

  import React, { Component } from 'react';
  import withRedux from 'next-redux-wrapper';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import AboutCom from '../components/About/index';
  import initializeStore from '../store/initializeStore';
  import { changeCount } from '../modules/about/actions';

  class About extends Component {
    constructor(props) {
     super(props);
    }
    render() {
     const { about: { count }, changeCount } = this.props;
     return ;
    }
  }

  const connectedPage = connect(
    state => ({ about: state.about }),
    dispatch => ({
     changeCount: bindActionCreators(changeCount, dispatch)
    })
  )(About);

  export default withRedux(initializeStore)(connectedPage);

查看 github官網(wǎng)

react-next github上一個(gè)next架構(gòu)為主實(shí)現(xiàn)React服務(wù)端渲染的模板

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標(biāo)題名稱：Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例
鏈接地址：http://weahome.cn/article/pjdsdd.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Next.js實(shí)現(xiàn)react服務(wù)器端渲染的方法示例

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管