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 ()
}
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
作者: Bill 本文地址: http://biaoblog.cn/info?id=1575856500000
版权声明: 本文为原创文章，版权归 biaoblog 个人博客 所有，欢迎分享本文，转载请保留出处，谢谢！
