全局安装

​​sudo yarn global add create-next-app​​ 创建

​​yarn create next-demo​​

​​cd next-demo​​

指定端口打开。

​​npm run dev -- -p 3001​​ or ​​yarn dev -p 3001​​

Hello NEXT.js_创建文件


文件结构

Hello NEXT.js_ico_02

样式使用

import styles from "../styles/Home.module.css";
{/* import 外部css文件要加.module */}
export default function Home() {
  return (
    <div className={styles.container}>
    {/* 全局样式 eg: pointer 在_app.js中引入 */} 
    {/* 引入的css eg: styles.textShadow */} 
    {/* 全局样式，外部样式一起使用：className={`pointer ${styles.textShadow}` */}
      <h1 className={`pointer ${styles.textShadow}`}>Hello NEXT</h1>
      // 内部css
      <style jsx>{`
        h1 {
          text-decoration: underline;{/*文字下划线*/}

        }
      `}</style>
    </div>
  );
}

Hello NEXT.js_ico_03

定义Head

import Head from "next/head";

<Head>
 ...
</Head>

示例

import "../styles/globals.css";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Head>
        <title>hello NEXT</title>
        <link rel="icon" href="../public/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
      </Head>
    </>
  );
}

export default MyApp;

Hello NEXT.js_css_04

可以定义全局Head，也可以任意页面定义自己的Head

省心路由 page文件对应路由，在page下创建文件，即生成对应路由，如下：

Hello NEXT.js_reactjs_05

路由跳转：

import Link from 'next/link'

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

or 编程式导航

import { useRouter } from 'next/router'

const { push } = useRouter()

<a onClick={() => {push("/about")}}>about</a>

路由监听
路由拥有六种监听类型
​​​routeChangeStart​​​ ​​routerChangeComplete​​​ ​​routerChangeErroe​​​ ​​routerHistoryChange​​​ ​​hashChangeStart​​​ ​​hashChangeCOmplete​​ 使用示例：

import Router from "next/router";
//...
const {
    push,
    events: { on:routerListener },
  } = Router;

  routerListener("routeChangeStart", (...args) => {
    console.log("args", ...args);
  });

路由参数获取

import { useRouter } from "next/router";
export default function About() {
  const { query } = useRouter();
  console.log("query", query);
  
  return (
    <div>
      <h1>About</h1>
    </div>
  );
}

路由传参

<Link
     href={{ pathname: "/about", query: { id: 123 } }}
     as={{ pathname: `/about/123` }}
    >
     <a>about-LINK</a>
    </Link>

or

<a
    onClick={() => {
      push({ pathname: "/about", query: { id: 456 } },'/about/456');
    }}
  >
    about
  </a>

各种meta标签

Hello NEXT.js_ico_06