1

How can I create a loader page between transitions on same web application using Next JS?

Right now, in dev environment the pages have a normal transition, meaning that the CSS is applied on every page correctly. The problem begins when building the application to production environment, for example, when I click on a button that has a Link component to another page, it appears like the following for 1 or 2 seconds:

CSS on page rendering wrongly

After 1 or 2 seconds it renders accordingly: Css and components appearing correctly

Sorry for the vague question, but I don't know where to start looking to resolve this problem and I guess it'll fix with two possible solutions:

  1. A loader page between transitions on pages.
  2. Doing something on _app.js or _document.js, but right now I don't know how to start looking here.
Miguel V
  • 606
  • 2
  • 6
  • 18
  • Does this answer your question? [Loading Screen on next js page transition](https://stackoverflow.com/questions/55624695/loading-screen-on-next-js-page-transition) – juliomalves Jan 28 '22 at 20:00

2 Answers2

9

You need to import Link from next js to solve the render issue, if you want to do a loading screen you can use hooks, for example:

import {useState, useEffect} from 'react';
import Router from 'next/router';

    function MyApp() {
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    Router.events.on('routeChangeStart', () => setLoading(true));
    Router.events.on('routeChangeComplete', () => setLoading(false));
    Router.events.on('routeChangeError', () => setLoading(false));
    return () => {
      Router.events.off('routeChangeStart', () => setLoading(true));
      Router.events.off('routeChangeComplete', () => setLoading(false));
      Router.events.off('routeChangeError', () => setLoading(false));
    };
  }, [Router.events]);
    
  return (
    <>
    {
      (loading)
      ?
      <p>Loading...</p>
      :
      <p>Home</p>
      
    } 
    </>
);
}
Martín Morales
  • 106
  • 3
1

In approaching this problem, there are two ways to think about it.

  1. Individual page entries/exits (fade out/fade in) can have animation applied, this really means those components can apply a CSS based transition as the routes are mounted and the transition is applied to the parent (page level container)
  2. Individual elements can be animated as they are unmounted.

For both #1 and #2 if you want to roll your own, you can look at https://reactcommunity.org/react-transition-group/switch-transition

These two approaches build on top of the above ideas

  1. If youu are OK with adding Framer - https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion
  2. With next page transition - which focuses more on the react transition group https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions
Ramakay
  • 2,919
  • 1
  • 5
  • 21