Next.js 入门

创建项目

npm init next-app [项目名] 
// 选择 Default starter app
cd next-demo
touch .gitignore
yarn dev
// 浏览器打开控制台给出的网址，创建成功

image.png

约定大于配置

创建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快速导航
                <Link href="//www.greatytc.com/post/first-post"><a>去第一篇文章!</a></Link>
                <h1>看看</h1>
            </div>
            <style jsx>   // 局部样式 styled-jsx
                {`
                    h1{
                        color:yellow;
                    }
                    p{
                      color: black;
                    }
                `}
            </style>
        </React.Fragment>
    )
}

Link快速导航标签式导航文档

使用Link 代替a标签。
原理：Link组件对链接进行劫持，当点击链接时，自动进行请求该链接资源，然后替换当前页面的样式和数据。

优点

页面不会刷新，利用ajax请求新页面内容，然后替换当前页面
不会请求后重复HTML,CSS,JS
自动在页面插入新内容，删除就内容
省略很多请求和解析过程，所以速度极快

全局配置

page目录下进行_app.js 文件，export default function App ,是每个页面的根组件
切换页面是App不销毁，App里面的子组件会销毁
App可保存全局状态

// page/_app.js
import React from "react";
import Head from "next/head";
import "styles/global.css"  // 全局样式，不会销毁
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>
    )
}

总结

创建项目
npm init next-app [项目名]
快速导航

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

同构代码
- 一份代码，两端运行
全局组件
- pages/_app.js
自定义head
- 使用Head组件
全局CSS

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