Welcome page/ first launch page using react/next.js - reactjs

Question

Can you send me some examples of the page which only renders once.
I want to see how others implement this feature.
Since I use next.js I tried saving not in localstorage but using cookies and it works but in prod on vercel I can see this page WHEN I don't have to, it shows it for <1s and then show the correct page.
UPD:
It works but when I how the website using vercel this happends:
First time
Shows the welcome page
I press the button "NEXT" and I go to the next page
If I go back in doesn't allow me and it returns to the page on step 2
Once I close the google tab and reopen my website I:
See the welcome page for <0.5s
I am transferred to the page where I supposed to at first.
Maybe this is has to do with cookie i use
put the implementation of this page:
const firstTime = cookies(props).firstLaunch;
useEffect(() => {
const expire = new Date(new Date().getTime() + 7776000000000);
if (firstTime === undefined) {
document.cookie = `firstLaunch=false; expires=` + expire;
}
alert(localStorage.firstLaunch);
}, [firstTime]);
if (firstTime === "false") return <LoadingPage title={""} to={"/map"} />;
return (
... <=== welcome page
async function getStaticProps(ctx) {
return {
props: {
firstLaunch: cookies(ctx).firstLaunch,
},
};
}

Answer 1

I think you have to use getServerSideProps as getStaticProps runs on build time and cookies aren't available then. It's a bit different in development mode - static pages are rerendered on every change, so it may have looked to work properly.
Try this:
export async function getServerSideProps() {
const parsedCookies = cookie.parse(context.req.headers.cookie);
if (!parsedCookies.firstLaunch) {
return {
redirect: {
permanent: false,
destination: '/first-launch',
},
}
}
}
This way you can redirect user on server side without any content flash (0.5s). Your firstLaunch page must be available under some route though.

Answer 2

import Link from "next/link";
import React, {useEffect} from "react";
import { ArrowIcon } from "../components/ui/icons";
import cookies from "next-cookies";
import { useRef } from "react";
function Home() {
const cookieRef = useRef<Boolean>(true);
useEffect(() => { <=== I use useRef to make this block run only once
if(cookieRef.current) {
const expire = new Date(new Date().getTime() + 7776000000000);
document.cookie = `firstLaunch=yey; expires=` + expire;
cookieRef.current = false;
}
}, [cookieRef]);
return (
....
);
}
export default Home;
export async function getServerSideProps(ctx) {
const tmpCookies = cookies(ctx)
if (tmpCookies.firstLaunch) { <=== if it is not my first time
return {
redirect: {
permanent: false,
destination: '/map', <=== redirect
},
}
}
return { <==== if it is my first time don't do anything
props: {}
}
}
Thank you Aitwar for the idea of using getServerSideProps with redirect