连续复制
一键复制
一键打包

01.next基础.md

md

全局安装脚手架

npm install -g create-next-app

创建项目

create-next-app demo02

或者忽略上面的操作

使用 npx 直接创建项目：npx create-next-app next-create

标签导航和编程导航

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

export default function Home() {

  function handleClick() {
    Router.push("/jspang");
  }

  return (
    <div>
      {/* 导航式调整 */}
      <Link href="/">跳转首页</Link>
      <Link href="/jspang">
        <div style={{ display: "inline-block" }}>
          <span>跳转jspan页面</span>
          <span>---</span>
        </div>
      </Link>

      {/* 编程式导航 */}
      <div>
        <button onClick={handleClick}>跳转jspan页面</button>
      </div>
    </div>
  );
}

路由传参

export default function Home() {
  function handleClick() {
    Router.push({
      pathname: "/test2",
      query: {
        id: 2,
      },
    });
  }

  return (
    <div>
      {/* 导航式调整 */}
      <Link href={{ pathname: "/test2", query: { id: 1, } }}>
        <div style={{ display: "inline-block" }}>
          <span>跳转test2页面</span>
          <span>---</span>
        </div>
      </Link>

      {/* 编程式导航 */}
      <div>
        <button onClick={handleClick}>跳转test2页面</button>
      </div>
    </div>
  );
}
import { withRouter } from "next/router";

// 如果不用 withRouter 是获取不到路由参数的
export default withRouter(({router}) => {
    return (
        <div>
            hello Test2 -- > {JSON.stringify(router.query)}
        </div >
    );
})

02.路由钩子.md

md

export default function Home() {
  // history模式 路由跳转前触发
  Router.events.on("routeChangeStart", (...args) => {
    console.log('路由跳转前触发，参数为：', args);
  });

  // history模式 路由跳转时触发
  Router.events.on("beforeHistoryChange", (...args) => {
    console.log('路由跳转时触发，参数为：', args);
  });

  // history模式 路由跳转后触发
  Router.events.on("routeChangeComplete", (...args) => {
    console.log('路由跳转后触发，参数为：', args);
  });

  // 路由出错时触发（请求数据发生错误时会触发该事件）
  Router.events.on("routeChangeError", (...args) => {
    console.log('路由发生错误，参数为：', args);
  });

  // hash模式 路由跳转时触发
  Router.events.on("hashChangeStart", (...args) => {
    console.log('路由跳转时触发，参数为：', args);
  });

  // hash模式 路由跳转后触发
  Router.events.on("hashChangeComplete", (...args) => {
    console.log('路由跳转后触发，参数为：', args);
  });

  return (
    <div>
      {/* 导航式跳转 */}
      <Link href={{ pathname: "/test2", query: { id: 1, } }}> 跳转test2页面 </Link>

      {/* hash式路由 */}
      <Link href="#jspang"> hash式路由跳转 </Link>
    </div>
  );
}

03.远程获取数据.md

md

安装包

yarn add axios

示例

import { withRouter } from "next/router";

// 所有的请求只能写在 getInitialProps 中
Home.getInitialProps = async () => {
  // 假设这是一个远程请求
  const result = new Promise((resolve, reject) => {
    // 返回数据， { userInfo: {...} }
    resolve({
      userInfo: {
        name: "小明",
        age: 18,
      },
    });
  });

  return await result;
}

function Home(props) {
  // props.userInfo 就是上面 resolve 返回的 userInfo: {...} 数据
  console.log(props.userInfo);

  return (
    <div>
      <h1>远端获取到的数据</h1>
      <p>姓名：{props.userInfo.name}</p>
      <p>年龄：{props.userInfo.age}</p>
    </div>
  );
}

export default withRouter(Home);

04.使用style jsx编写页面的css.md

md

export default withRouter(()=>{
  const [color, setColor] = useState("#fff");

  function hanldeClick(){
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    setColor(`rgb(${r}, ${g}, ${b})`);
  }

  return (
    <div>
      <h1>hello world</h1>
      <button onClick={hanldeClick}>点击改变颜色</button>
      <style jsx>
        {
          `
            h1{
              color: ${color};
              background-color: red;
            }
          `
        }
      </style>
    </div>
  );
});

05.模块懒加载.md

md

第三方模块懒加载

export default withRouter(() => {
  const [nowTime, setTime] = useState(Date.now());

  const handleClick = async () => {
    // 使用时在引入
    const moment = await import("moment");
    setTime(moment.default(Date.now()).format());
  }

  return (
    <div>
      <p>显示时间为：{nowTime}</p>
      <p>
        <button onClick={handleClick}>点击格式化时间</button>
      </p>
    </div>
  );
});

自定义组件懒加载

// 引入 next 框架提供的dynamic方法
import dynamic from "next/dynamic";
// 引入组件，现在不会被加载，只有在页面中使用了才会被加载
const One = dynamic(import("../components/one"));

export default withRouter(() => {
  return (
    <div>
      <One></One>
    </div>
  );
});

06.自定义Head.md

md

// 引入 Head 组件
import Head from "next/head";

export default withRouter(() => {
  return (
    <div>
      {/* Head组件和html中的head标签含义都是一样的 */}
      <Head>
        <title>这是主页</title>
      </Head>
    </div>
  );
});

07.使用Antd UI框架.md

md

老版本配置

  • 安装包

yarn add antd
yarn add @zeit/next-css  -->  让next支持css引入

  • 根目录新建 next.config.js 文件

const withCss = require("@zeit/next-css");

//官方规定写法
if(typeof require !== "undefined"){
    require.extensions[".css"] = file => {};
}

module.exports = withCss({});

  • babel 按需加载，下载包

yarn add babel-plugin-import

  • 根目录新建 .babelrc 文件

{
    "presets": [
        "next/babel"
    ], //沿用以前的配置，不做改变
    "plugins": [ //自己写的配置
        [
            "import",
            {
                "libraryName": "antd",//antd的js文件按需加载
                "style": "css" //按需加载css
            }
        ]
    ]
}

新版本

  • 下载包

yarn add antd

  • pages/_app.js

// 头部引入antd的样式即可
import 'antd/dist/antd.css';

目录

   ├── 01.next基础.md
   ├── 02.路由钩子.md
   ├── 03.远程获取数据.md
   ├── 04.使用style jsx编写页面的css.md
   ├── 05.模块懒加载.md
   ├── 06.自定义Head.md
   ├── 07.使用Antd UI框架.md