1.自动创建项目：

使用脚手架前，需要先进行全局安装。

npm install -g create-next-app

npx 是Node自带的npm模块 低版本的node没有所以需要安装

$npm install -g npx

到指定盘符下创建项目：

$npx create-next-app next-create

启动项目：

$npm run dev

2.在next中创建组件：（在page目录下）

function Biaoge(){
return (<button>彪哥</button>)
}
export default Biaoge;

3.创建路由

在page目录下创建js，page相当于是一个根目录。

举例：在page下创建一个biao.js的文件 访问路径为：localhost:8080/biao

4.路由跳转传参和接收参数以及jsx方式使用css样式

传递参数

 // 引入Router 使用Router.push

 import Router from 'next/router'

   // 引入页面跳转的组件 link

   // 两种跳转的方式 第一种Link 第二种Router.push('/')

    import Link from 'next/link'
    function goAPage(){
      Router.push('/pageA')
    }
    function goClor(){
      var color = document.getElementById('color').value
      // 通过对象的形式传递参数传递参数
      // next暂时只支持query形式传参
      // 也可以Router.push(/color?name=color)
      // 也可以通过标签传参 href="/color?name=color" 
      // href={{pathname:'/color',query:{name:color} } }
      Router.push({
        pathname:'/color',
        query:{
          name:color
        }
      })
    }
    return(
      <div>
        <div>我是首页</div>
        {/* link里面标签需要用一个a标签嵌套 */}
        <button><Link href="/pageA"><a  target="_blank">我是a页面</a></Link></button>
        <button><Link  href="/pageB"><a target="_blank">我是b页面</a></Link></button>
        <button onClick={goAPage}>我来试试编程式路由跳转</button>
        <p>请选择一个颜色吧 
          <select onChange={goClor} id="color">
            <option vlaue="yellow">黄色</option>
            <option vlaue="green">绿色</option>
            <option vlaue="white">白色</option>
          </select>
        </p>

        <div>
        </div>
        <Time></Time>
        <TestUi></TestUi>
      </div>
    )
    }

接收参数：

//withRouter是Next.js框架的高级组件，用来处理路由用的
import { withRouter } from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import React,{useState} from 'react'
//Router是携带query参数的对象
// 1.1 data是 getInitialProps 返回的res.data
 function Color({router,data}){
     const [color,setColor] = useState('green')
     const ChangeColor = ()=>{
        setColor(color==='green'?'red':'green')
     }
    return(
        <div>
            你选择了 {router.query.name}
            <br/>
            <Link href="/"><a>返回首页</a></Link>
            <ul>
                {data.message.map((item,index)=>{
                    return(
                    <div key={index}>
                        <span>{item.date}</span>   
                        <li>{item.say}</li>
                    </div>
                    )
                })}
            </ul>
            <p><button onClick={ChangeColor}>改变颜色</button></p>
            {/* 在jsx中使用样式 并动态改变样式*/}
            <style jsx>
                {
                    `
                        div{color:${color}}
                    `
                }
            </style>
        </div>
    )
}
Color.getInitialProps = async ()=>{
    const promise =new Promise(resolve=>{
        axios.get('http://118.24.223.144:3000/blogData/mood')
             .then(res=>{
                console.log(res)
                resolve(res)
            })
    })
    // 1 这里 返回的是一个接口 返回值对象
    return await promise
}
//此处填坑 需要暴露withRouter 并把组件放进去
export default withRouter(Color)

5.路由的6个钩子函数：

    // routerChangeStart路由发生变化时
    Router.events.on("routeChangeStart",(...args)=>{
      console.log(...args)
    })
    // routerChangeComplete路由结束变化时
    Router.events.on("routeChangeComplete",(...args)=>{
        console.log(...args)
    })
    // beforeHistoryChange浏览器history触发前
    Router.events.on('beforeHistoryChange',(...args)=>{
      console.log('3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)
    })
    // routeChangeError路由跳转发生错误时
    Router.events.on('routeChangeError',(...args)=>{
      console.log('4,routeChangeError->跳转发生错误,参数为:',...args)
    })
    // 还有两种事件都是针对hash的
    Router.events.on('hashChangeStart',(...args)=>{
      console.log('5,hashChangeStart->hash跳转开始时执行,参数为:',...args)
    })
    Router.events.on('hashChangeComplete',(...args)=>{
      console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
    })

6、模块懒加载

import React, {useState} from 'react'

//时间格式化组件 需要下载

import moment from 'moment'

//1.为了优化项目，可以使用Lazy Loading模块懒加载（类似于按需加载 当我们作的应用存在首页打开过慢和某个页面加载过慢时，就可以采用Lazy Loading的形式，用懒加载解决这些问题）。

//2.同理，懒加载可以使用在自定义组件上

//2.1先引入dynamic

import dynamic from 'next/dynamic'
const Self = dynamic(import('../pages/Self'))

// 不使用懒加载
function Time(){
    const [nowTime,setTime] = useState(Date.now())
    //声明一个修改时间的方法
    const timeFilter = () =>{
        // moment组件固定写法 没啥纠结的
        setTime(moment( Date.now() ).format() )
    }
    return(
        <>
            <div>
                {nowTime}
            </div>
            <p><button onClick={timeFilter}>点击格式化时间</button></p>
            {/* 2.2 只有在jsx里用到<Self/>时，才会被加载进来，如果不使用就不会被加载。 */}
            <Self></Self>
        </>
    )
}
// 使用懒加载
function Time2(){
    const [nowTime,setTime] = useState(Date.now())
    const timeFilter = async()=>{ //把方法变成异步模式
        const moment = await import('moment') //等待moment加载完成
        setTime(moment.default( Date.now() ).format() ) //注意使用defalut
    }
    return(
        <>
            <div>
                {nowTime}
            </div>
            <p><button onClick={timeFilter}>点击格式化时间</button></p>
        </>
    )
}

export default Time

7.自定义Head组件优化SEO

//可以使用Head来设置title，meta等来优化seo(next主要就是用来做seo的)

//1.引入Head

//也可以把head封装成一个公共的组件 通过传递参数来在各个页面进行引入和使用

import Head from 'next/head'
function Biaoge(){
    return(
        <div>
            {/* 1.1引入使用设置title和meta */}
            <Head>
                <title>彪哥是最帅的！</title>
                <meta charSet='utf-8' />
            </Head>
           <div>next.js彪哥来了~</div>
        </div>
    )
}
export default Biaoge

8.引用ant-designUi到next.js中

//默认情况下next是不支持import 引入css的，但是要使用antDesignUi就需要使用important

//1.安装 @zeit/next-css 并配置 让next支持important引入css

//2.建立一个next.config.js文件引入并配置（next的总体配置文件）

const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}
module.exports = withCss({})
//3.下载依赖包 npm i antd --save
//4.下载babel-plugin-import 插件（按需引入必要的）npm i babel-plugin-import --save
//5.安装完成后，在项目根目录建立.babelrc文件，然后写入如下配置文件。
{
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd",
                "style":"css"
            }
        ]
    ]
}
//6.进行按需引入
import {Button} from 'antd'
function TestUi(){
    return(
        <div>
            <Button>antdUiButton</Button>
        </div>
    )
}

export default TestUi

9.next打包并修复ant-design引入导致打包失败的原因。

打包命令：

$npm run build

// 当你使用了Ant Desgin后，在打包的时候会遇到一些坑。

// 在page目录下，新建一个_app.js文件，然后写入下面的代码。

import App from 'next/app'
import 'antd/dist/antd.css'
export default App

// 这个文件相当于是一个全局的配置文件

// 然后把.babelrc找那个的 "style":"css" 去掉即可打包成功

查看打包后的效果：

$npm run start

参考文档：https://www.nextjs.cn/learn/basics/create-nextjs-app/editing-the-page

部署参考：https://segmentfault.com/a/1190000012774650