Hello NEXT.js-优快云博客

本文链接：https://blog.youkuaiyun.com/printf_hello/article/details/108932562

全局安装
sudo yarn global add create-next-app
创建
yarn create next-demo
cd next-demo
指定端口打开。
npm run dev -- -p 3001 or yarn dev -p 3001
在这里插入图片描述
文件结构

样式使用

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>
  );
}

在这里插入图片描述

定义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;

在这里插入图片描述

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

省心路由 page文件对应路由，在page下创建文件，即生成对应路由，如下：
在这里插入图片描述

路由跳转：

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>

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

各种meta标签
在这里插入图片描述