React Nextjs （上）

nextjs

還是 React 的生態(tài)，今天聊聊 React 服務(wù)端渲染框架 Nextjs。

創(chuàng)建初始化項目

npm init -y

安裝 react 、react-dmo next 依賴

yarn add react react-dom next

在 pages 文件夾下創(chuàng)建一個 index.js 當訪問 "/" 就會返回這個文件的內(nèi)容，在 next 中我們這里無需引用 React 就是可以使用 jxs。

const Index = () => <h1>Hello World from Next JS</h1>;

export default Index;

我們修改一下 next 啟動命令。

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

值得注意也是我們?yōu)?Nextjs 而叫好的就是 pages 中結(jié)構(gòu)就實際路由的結(jié)構(gòu)。訪問 https://localhost:8000/就可以看到下面的畫面。

圖1

通過引入 next 的 Link 可以進行導航。Link 的屬性 href 可以指向一個地址。

import Link from "next/link";

const Index = () => (
  <section>
    <h1>Hello World from Next JS</h1>
    <Link href="/about">
      <a title="About NextJS">About Next JS Project</a>
    </Link>
  </section>
);

export default Index;
圖2

在 pages 跟目錄下創(chuàng)建 about.js 對應(yīng)于 /about 的 url。當訪問到 /about 就會開啟該頁面。

const About = () => (
    <section>
        <h1>about page</h1>
    </section>
)

export default About;

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

export default class Navbar extends Component {
  constructor(props) {
    super(props);
    this.props = props;
  }
  render() {
    return (
      <div>
        <div>
          <Link href="/">
            <a title="About Next JS">Home</a>
          </Link>
          <Link href="/about">
            <a title="About Next JS">About Next JS</a>
          </Link>
        </div>
      </div>
    );
  }
}
components

創(chuàng)建組件

創(chuàng)建一個名詞為 components 文件夾，在該文件夾下可以創(chuàng)建組件，創(chuàng)建組件的方式與 react 項目中創(chuàng)建組件并沒有特別之處。


圖3
import Navbar from "../components/Navbar";

const Index = () => (
  <section>
    <h1>Hello World from NextJS</h1>
    <Navbar />
  </section>
);

export default Index;

創(chuàng)建好組件便可以在我們 index.js 文件引入后進行使用。

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

export default class Navbar extends Component {
  constructor(props) {
    super(props);
    this.props = props;
  }
  render() {
    return (
      <nav>
        <div>
          <Link href="/">
            <a title="About Next JS">Home</a>
          </Link>
          <Link href="/about">
            <a title="About Next JS">About Next JS</a>
          </Link>
        </div>
        <style jsx scoped>{`
          a {
            padding: 10px;
            text-decoration: none;
            color: "skyblue";
          }
        `}</style>
      </nav>
    );
  }
}
圖5

在項目 pages 下可以創(chuàng)建一個可以被 next 自動識別的文件 _document.js 大家可能已經(jīng)注意到了這個文件是以 _ 開頭。
這個文件用于控制整個頁面的骨架. 這個自定義的 _document.js 可以讓覆蓋默認的頁面布局, 添加樣式, 等等。以一種更優(yōu)雅方式來添加樣式而不是寫奇怪的 jsx。


圖6

這個文件無需引入，Next 會知道如何使用這個文件

import Document, { Head, Main, NextScript} from 'next/document';

export default class MDocument extends Document{
    render(){
        return (
            <html>
                <Head>
                    <title>Next JS Awesome Kit</title>
                </Head>
                <body>
                    <Main/>
                    <NextScript/>
                </body>
            </html>
        )
    }
}

引入 Sass

  • 寫 css 當然更底層，更底層就表示更難于控制，現(xiàn)在我更愿意寫 sass 、less 或者 stylus 來高效地寫樣式表。

要在項目中應(yīng)用 sass，我們需要做一些工作才能在項目中寫 sass。在根目錄下創(chuàng)建一個名為 next.config.js 文件


next.config

然后添加下面代碼 zeit 就是 next 的作者吧。

const withSass = require("@zeit/next-sass")
module.exports = withSass();

yarn add @zeit/next-sass node-sass

做好準備工作我們就可以開始 sass 了。怎么寫 sass 我就不做更多說明了，今天重點不在于此。而是如何將 sass 引入到項目中已經(jīng)如何使用。


scss
nav {
$green: green;


nav {
    padding: 10px;

    a {
        text-decoration: none;
        color: $green;
    }
}

<html>
              <Head>
                    <title>Next JS Awesome Kit</title>
                    <link rel="stylesheet" href="/_next/static/style.css"/>
                </Head>
                <body>
                    <Main/>
                    <NextScript/>
                </body>
            </html>

yard add node-sass
圖7
圖8
$green : green;

@import '_vars.scss';

nav {
    padding: 10px;

    a {
        text-decoration: none;
        color: $green;
    }
}
圖9
render() {
    return (
      <nav>
        <div>
          <Link href="/">
            <a title="About Next JS">Home</a>
          </Link>
          <Link href="/about">
            <a title="About Next JS">About Next JS</a>
          </Link>
          <mark className="badge">Hello!</mark>
        </div>
      </nav>
    );
  }

mark {
    border-radius: 10px;
    background-color: lightblue;
}

import "./Navbar.scss";
圖10

引入 PostCSS

都知道我們應(yīng)用中 less 寫的樣式中某些屬性在不同瀏覽器中不同前綴，許多方式可實現(xiàn)對屬性名稱進行補全而無需 developer 手動來添加前綴。之前項目中是使用的 gulp 的插件來實現(xiàn)。在 postcss 也有對應(yīng)的插件。
prefix 添加多個瀏覽器支持的前綴。

postcss

在項目根目錄下創(chuàng)建 postcss.config.js 也就是 postcss 的配置文件，我們可以在這個配置文件中添加插件。

module.exports = {
    plugins:[
        require("autoprefixer")({})
    ]
}

yarn add autoprefixer -D

import Navbar from "../components/Navbar";
import Head from 'next/head'
import "../scss/style.scss";
const Index = () => (
  <section>
  <Head>
    <title>Hello world</title>
  </Head>
    <h1>Hello World from NextJS</h1>
    <Navbar />
  </section>
);

export default Index;

添加 express 作為后端

添加 express 依賴到項目中，然后在項目根目錄下新建的 server 文件夾用于存放服務(wù)文件。

yarn add express
server

將我們的 dev 腳本命令修改一下修改為 node server/index.js 通過 express 來啟動我們項目。

"scripts": {
    "dev": "node server/index.js"
  },

然后就是搭建我們服務(wù)了。

const express = require("express")
const next = require("next")

const PORT = process.env.PORT || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({dev})
const handle = app.getRequestHandler();

app.prepare()
    .then(()=>{
        const server = express();

        server.get("*",(req,res)=>{
            return handle(req,res);
        })

        server.listen(PORT, err => {
            if(err) throw err;
            console.log(`> Ready on ${PORT}`);

        })
        .catch(ex => {
            console.error(ex.stack);
            process.exit(1);
        })
    })
  • 引入 express 和 next 依賴
  • 設(shè)置端口 PORT 默認為 3000
  • 獲取 next 應(yīng)用的實例
  • 在 prepare 方法返回 promise 設(shè)置 express 服務(wù)和定義路由。
 server.get("/api/shows",(req,res)=>{
            return res.end('api shows')
        })

        server.get("*",(req,res)=>{
            return handle(req,res);
        })

可以設(shè)置 api 路徑


圖1
react 生態(tài)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容