How to show something while refreshing instead of default white page with nextjs?

Question

For example, if you refresh facebook.com, while refreshing you will still see nav bar, how to do that?

I have tried with Router.events.on and off to get loading time, but still have white page on refresh

Answer 1

You need persistent layouts.

Putting the following code in your _app file will cause the layout to not remount on every page change.

// pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

The idea would be to put header, footer etc. in your layout and the rest of the main body will change.