Next.js Redirection without Flashing Content
As we well know, Next.js is becoming the flagship framework for react application development due to many factors that if you are opting for Next.js, you should already know.
This article will cover a problem that can occur when protecting routes in Next.js
there are some points that we must take into account when dealing with certain aspects, understanding the operation of React app and Next.js
As we well know when we protect a route, we validate if the user has access to the content, the most common is to validate the token that was provided by accessing where it is stored and we verify it, in case the user is not validated we make a redirection to a route that we define, with that we protect our routes correctly.
In React app when doing the redirection it is something as simple as history.push, in react this is not a problem because all the data that was sent is obtained from the client side (including HTML and CSS), therefore we will not have intermittent content . If you still do not know what I mean, you will understand below.
In Next.js we first get the static page and after finishing the hydration, the JS code that is going to perform the redirection is executed, that causes the protected page to be displayed for a moment and that does not look good, you can check this page on this page You should not have access to the content, nor should you be able to view it unless you have access, but as you can see, you can appreciate the content of the protected page.
I found certain ways to solve this inconvenience, one of them is to do the validation on the server side which I consider a good option but it is to get into somewhat more complex concepts in which it can be made more complicated if we want to create a persistent session for the user, let me explain, the complexity and control that next js gives you is so wide that it is very intuitive to separate the logic of SSR and CSR but even so we have to have well defined the differences and the limitations that they provide.
Solution
I will be brief, we will implement a page loader to block the content until the validation and redirection are finished, with this we avoid the blinking of content that we do not want to show.
At the end of this guide we will obtain a result like link
As you can see, we have a preloader that will be showing the time it takes for the validation to then redirect us to the login page
you can see the preloader in detail preloader
For the following, it is first good to understand the context of the application, it uses redux persist to save user information in local storage, we will do the same but directly, I will only validate if the user is authenticated and check that the array contains a token === true , the ideal is to check the token with some method.
I am not going to stop to explain each line of code but I will summarize it.
As you can see we are using a component in which we are going to store our functions that we will use throughout the application, in this case we rely on userContext and CreateContext, At the moment of starting the application we provide the component so that all the child components have access to the functions, with this we achieve that the variables created with useState influence the child components and rehydrate the component when they change.
In the following image we can see that we provide the component when starting our application
Once the above is done, what remains is to protect the route as follows
What we do here is the following, we will call the two variables declared with usestate, what will happen is the following
the declared useffect will be executed and we will validate the login, in that course, we will provide the PreloadComp component, if the user is not authenticated we redirect them to the index, while all this happens the only page that was shown is the preloader , we achieved thanks to Since we are using variables declared with useffect , if the isLoading variable is null and isAuthenticated is true , the requested page will be provided, otherwise it will wait for the redirection.
If you are not yet familiar with the methods used, it is good that you see each line in detail so that you can have a better context of what is applied, the reason why all the methods are not explained is to not make this article endless.
