Почему Next.js перезагружает страницу при переключении страниц в меню?

Question

Андрей Сергеев @sergeevsite

Почему Next.js перезагружает страницу при переключении страниц в меню?

Всем привет!

Суть в том, что на React.js такое меню работает как нужно, а именно, открываем бургер-меню, выбираем страницу, кликаем по ссылке в меню и контент страницы меняется, а меню остается. Это доказывает, что React.js поменял только контент страницы и не трогал бургер-меню со списком.

По поводу Next.js. Там при аналогичных действиях меню убирается и как будто страница перезагружается. Это происходит быстро и это круто, но из-за этого нету даже впечатления, что это SPA.

Вопрос в том, можно это как то реализовать или может я совершил где-то ошибку, прошу посмотреть код и помочь в решение.

Layout.js

import React from 'react'
import Header from '../components/includes/Header'
import Footer from '../components/includes/Footer'
import Head from 'next/head'

const Layout = ({ children, title = 'ValeShops' }) => {
  
  return (
    <React.Fragment>
      <Head>
        <title>{title} | ValeShops</title>
      </Head>
      <Header />
      <main>
        <section>
          { children }
        </section>
      </main>
      <Footer />
    </React.Fragment>
  )
}

export default Layout

Header.js

import Link from 'next/link'
import Search from '../UI/Search'
import Humburger from '../UI/Humburger'

 const Header = () => {

  return (
    <>
      <section>
        <div className='header'>
          <div className='header__column--left'>
            <div className='header__logo'>
              <Link href={'/'}>
                <a>
                  <span></span>
                </a>
              </Link>
            </div>
            <Search 
              className='search__field'
            />
            <ul className='navigation'>
              <li>Top-10 Deals</li>
              <li>
                <Link href={'/stores'}>
                  <a>All stores</a>
                </Link>
              </li>
            </ul>
          </div>
          <ul className='navigation header__column--right'>
            <li>
              <Link href={'/login'}>
                <a>Login</a>
              </Link>
            </li>
            <li>
              <select>
                <option value="">English</option>
                <option value="">English</option>
                <option value="">English</option>
              </select>
            </li>
            <li>
              <select>
                <option value="">Country</option>
                <option value="">Country</option>
                <option value="">Country</option>
              </select>
            </li>
            <li>
              <Humburger />
            </li>
          </ul>
        </div>
      </section>
    </>
  )
}

export default Header;

Humburger.js

import React, { Component } from 'react'
import Menu from './Menu'

export class Humburger extends Component {

  state = {
    status: false
  }

  isOpenMenu = event => {
    this.setState({
      status: !this.state.status
    })
  }

  render() {
    const cls = ['humburger']

    if(this.state.status) {
      cls.push('open');
    }
    
    return (
      <>
        <div 
          className={cls.join(' ')}
          onClick={this.isOpenMenu}
        >
          <span className='humburger-t'></span>
          <span className='humburger-c'></span>
          <span className='humburger-b'></span>
        </div>
        <Menu 
          isOpen={this.state.status}
        />
      </>
    )
  }
}

export default Humburger

Menu.js

import Link from 'next/link'
import { useRouter } from 'next/router'

const Menu = props => {

  const cls = ['humburger__menu']

  if(props.isOpen) {
    cls.push('open')
  }

  const router = useRouter();

  return (
    <>
      <div className={cls.join(' ')}>
        <ul>
          <li>
            <Link href={'/how-it-works'}>
              <a>How it works</a>
            </Link>
          </li>
          <li>
            <Link href={'/news'}>
              <a>News</a>
            </Link>
          </li>
          <li>
            <Link href={'/about'}>
              <a>About</a>
            </Link>
          </li>
          <li>
            <Link href={'/user-agreement'}>
              <a>User Agreement</a>
            </Link>
          </li>
          <li>
            <Link href={'/privacy-policy'}>
              <a>Privacy Policy</a>
            </Link>
          </li>
        </ul>
      </div>
    </>
  )
}

export default Menu

Все страницы по типу Home
Home.js

import Layout from "../components/Layout"

const Home = () => {
  return (
    <Layout
      title='Home'
    >
      <div className='home'>
        <h1>Home</h1>
      </div>
    </Layout>
  )
}

export default Home