Next.js 使用总结

创建Next.js项目

全局安装create-next-app脚手架

npm i -g create-next-app

创建项目my-next

npx create-next-app my-next

安装完成后，根据提示运行项目，执行npm run dev命令

项目结构介绍

下面主要介绍用到的文件和文件夹

components文件夹: 用于放置自己写的组件，主要是公用组件和专用组件
pages文件夹: 放置用于浏览器展示的页面，此文件夹中的内容会自动生成路由，并在服务端渲染
static文件夹: 静态文件夹，比如项目图片、图标和静态资源

Next.js的Page使用

主要介绍如何新建页面

在pages文件夹下，新建一个index.js文件，此时路径为http://localhost:3000/index，代码如下:

// pages/index.js
function Index() {
    return (<div>首页</div>)
}
export default Index

在pages中也可以创建一个文件夹，因此对应的路径也会相应的变化，创建一个文件夹article，并新建一个文件add.js，此时的路径为http://localhost:3000/article/add

// pages/article/add.js
function AddArticle() {
    return (<div>添加页面</div>)
}
export default AddArticle

Next.js的Components的使用

直接在components文件夹下新建文件，如header.js

// components/header.js
function Header(props) {
    return (<div>
        Header
        <p>{props.children}</p>
    </div>)
}
export default Header

在pages中的index.js中使用

import Header from '../components/header.js'
...
<Header>首页</Header>
...

Next.js的路由跳转和传参

在Next.js中不用配置路由，但是我们需要进行路由跳转和传参

Next.js中页面条状分为两种形式，第一种利用标签<Link>，第二种是编程方式进行跳转Router

标签式导航<Link>

注: 在Link标签中只能有一个根标签

// pages/index.js
import Link from 'next/link' // 在next中获取link标签
function Index() {
return (<div>首页
    // 访问添加文章页面
    <Link href="/article/add">
        <a>
            <span>添加文章</span>
            <span>...</span>
        </a>
    </Link>
</div>)
}
export default Index

编程式导航Router

代码的耦合性低，便于多次调用

// pages/article/add/.js
import Router from 'next/router' // 在next中获取router
function AddArticle() {
    const gotoIndex = () => {
            Router.push('/index')
    }
    return (<div>添加页面
        // 方案一
        <button 
            onClick={() => {Router.push('/index')}}
        >返回首页</button>
        // 方案二
        <button onClick={gotoIndex}>返回首页</button>
    </div>)
}
export default AddArticle

在Next.js中只能使用query传递和获取参数

只能用query传递参数

在Next.js中只能通过query(?id=1)或query:{name:'结衣'}来传递参数

// pages/index.js
...
const gotoList = () => {
    Router.push({
        pathname: '/article/list',
        query: {name: 'react'}
    })
}
<div>
    // 传递参数
    // 1. ?name=react
    <Link href="/article/list?name=react">
        <a>react-1</a>
    </Link>
    // 2. {pathname: '/...', query: {name: 'react'}}
    <Link 
    href={{pathname: '/article/list', query: {name: 'react'}}}
    ><a>react-1</a></Link>
    // 3.编程式跳转传递参数
    <button onClick={gotoList}>react-1</button>
</div>
...
// pages/article/list.js
...
<div>
    // 接收参数
    <h2>{props.router.query.name}</h2>
</div>

使用getInitialProps获取远端数据

在Next.js中推荐使用getInitialProps获取远端数据

// pages/index.js
function Index(props) {
    // 在getInitialProps中获取的数据会映射到props中
    return (<div>首页</div>)
}
Index.getInitialProps = async () => {
    const promise = new Promise((resolve) => {
        axios({
            method: '',
            url: 'http://123...',
            ...
        }).then(res => {
            resolve(res)
        )
    })
    return await promise
}
export default Index

Next.js中的懒加载

懒加载共分为两种:

懒加载依赖包

比如,使用处理时间的依赖包dayjs，借助async、await实现懒加载

// pages/time.js
import React, {useState} from 'react'
function Time() {
    const [nowTime, setNowTime] = useState(Date.now())
    const formatTime = asunc () => {
        const dayjs = await import ('dayjs') 
        setNowTime(dayjs.default(Date.now()).format())
    }
    return (
        <>
            <div>当前时间: {nowTime}</div>
            <div>
                <button 
                    onClick={formatTime}
                >修改时间格式</button>
            </div>
        </>
    )
}
export default Time

懒加载自定义组件

主要用于components中组件的懒加载，借助dynamic实现

// pages/index.js
import React, {useState} from 'react'
import dynamic from 'next/dynamic'
const Lazy = dynamic(import ('../components/lazy.js'))

function Index() {
    // ...
    return (<div>
        <Lazy />
    </div>)
}
export default Index