全局安装 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>or
<a onClick={() => { push({ pathname: "/about", query: { id: 456 } },'/about/456'); }} > about </a>各种meta标签
