Next.js 入門

創(chuàng)建項(xiàng)目

npm init next-app [項(xiàng)目名] 
// 選擇 Default starter app
cd next-demo
touch .gitignore
yarn dev
// 瀏覽器打開控制臺(tái)給出的網(wǎng)址嗅虏，創(chuàng)建成功

image.png

約定大于配置

創(chuàng)建pages/posts/first-post.js
訪問路徑 /posts/first-post

示例

import React from "react";
import Link from "next/link";

export default function firstPost() {
    return (
        <React.Fragment>
            <div>
                first Post
                <hr/>
                // Link快速導(dǎo)航
                <Link href="/post/first-post"><a>去第一篇文章!</a></Link>
                <h1>看看</h1>
            </div>
            <style jsx>   // 局部樣式 styled-jsx
                {`
                    h1{
                        color:yellow;
                    }
                    p{
                      color: black;
                    }
                `}
            </style>
        </React.Fragment>
    )
}

Link快速導(dǎo)航標(biāo)簽式導(dǎo)航文檔

使用Link 代替a標(biāo)簽茎活。
原理：Link組件對(duì)鏈接進(jìn)行劫持沸毁，當(dāng)點(diǎn)擊鏈接時(shí)飒货，自動(dòng)進(jìn)行請(qǐng)求該鏈接資源带膜，然后替換當(dāng)前頁面的樣式和數(shù)據(jù)癌瘾。

優(yōu)點(diǎn)

頁面不會(huì)刷新更扁，利用ajax請(qǐng)求新頁面內(nèi)容记劈，然后替換當(dāng)前頁面
不會(huì)請(qǐng)求后重復(fù)HTML,CSS,JS
自動(dòng)在頁面插入新內(nèi)容勺鸦，刪除就內(nèi)容
省略很多請(qǐng)求和解析過程，所以速度極快

全局配置

page目錄下進(jìn)行_app.js 文件目木，export default function App ,是每個(gè)頁面的根組件
切換頁面是App不銷毀换途，App里面的子組件會(huì)銷毀
App可保存全局狀態(tài)

// page/_app.js
import React from "react";
import Head from "next/head";
import "styles/global.css"  // 全局樣式，不會(huì)銷毀
import png from "static/img/kk.png"

export default function App({Component, pageProps}) {
    return (
        <div className="YQY">
            <Head>
                <title>我的博客 ---  YQY</title>
                <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
            </Head>
            <img src={png} alt=""/>
            <Component {...pageProps}/>
        </div>
    )
}

總結(jié)

創(chuàng)建項(xiàng)目
npm init next-app [項(xiàng)目名]
快速導(dǎo)航

<Link href="/xxx"><a>xxx</a></Link>

同構(gòu)代碼
- 一份代碼刽射，兩端運(yùn)行
全局組件
- pages/_app.js
自定義head
- 使用Head組件
全局CSS

<style jsx> 
<style jsx global> 
xxx.module.css

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者