react 初步学习next.js

初步学习Next.js-新建项目

react和vue做的都是单页面应用

缺点：1.不适合SEO

2.启动慢

解决方案：next.js

参考技术胖的资料进行学习

https://jspang.com/detailed?id=51#toc21

初步学习next.js-6个路由钩子

/*6个钩子事件
    routeChangeStart
    routeChangeComplete
    beforeHistoryChange
    routeChangeError
    hashChangeStart
    hashChangeComplete
    */

import Head from 'next/head'
import Link from 'next/link'
import Router from 'next/router'
import styles from '../styles/Home.module.css'
import Hello from '../components/hello.js'
export default function Home() {
  /*6个钩子事件
    routeChangeStart
    routeChangeComplete
    beforeHistoryChange
    routeChangeError
    hashChangeStart
    hashChangeComplete
    */

  const goA = () => {
    Router.push('#mya')
  }
  Router.events.on('routeChangeStart', (...args) => {
    console.log('1.routeChangeStart', ...args)
  })
  Router.events.on('routeChangeComplete', (...args) => {
    console.log('2.routeChangeComplete', ...args)
  })
  Router.events.on('beforeHistoryChange', (...args) => {
    console.log('3.routeChangeComplete', ...args)
  })
  Router.