How to Create a Splash Screen in Next.js

How to display a CSS loader during the first loading of your Nextjs application

Introduction

When a user opens a Next.js application, even if the page corresponding to the url is cached on the server side, the browser will still display a blank page while the page is loading. In this tutorial we will see how to display a CSS loader while the page is loading to improve the user experience.

To get more tips like this about Nextjs and React follow me here

Let’s go 🚀

First we are going to create loader.js in /src that will content a CSS of our loader.

You can paste the following content:

Secondly we need to inject this CSS code into the header of our application so that it is loaded by the browser as quickly as possible.

To do this update or create _document.js of your application to look like this:

Now the CSS will be apply to #globalLoader div and it’s content.

If you are in local, you can limit internet connection of you browser in console to 2G to see the loader below:

Finally we need to hide this loader when page is completely load.

To do this, create or update your _app.js to look like this:

Conclusion

Now your application display a loader while loading. Your can rename CSS class name to avoid conflict with your existing global class name.

You can also get the code for our awesome loader here.

Hire senior Frontend Developer

Click here to write me if you want to hire senior Frontend developer for your next or current project.