I am new to nextjs and webdev. I been following a couple of tutorials but I still have a doubt. Lets say I have this page:

// /pages/test/load.js

import Link from 'next/link'
import Layout from '../../components/layout'
import { useRouter } from "next/router";


export default function TestLoad() {
    const router = useRouter();
    const query = router.query;
    console.log(query.info)
    // I don't want to show any of this code here, or the return in case queri.info != true.
    if (query.info == 'true') {
        console.log('TRUE RETURN')
        return (
            <Layout>
                <h1>First Post</h1>
                <h2>
                    <Link href="/">
                        <a>Back to home</a>
                    </Link>
                </h2>
                <p>Some hidden content that I don't want to show to all the users.</p>
                <p>Blah</p>
                // Images and more stuff

            </Layout>
        )
    } else {
        return (
            <>
                <h1>Nothing to show</h1>
                    <Link href="/">
                        <a>Back to home</a>
                    </Link>
            </>
        )
      }

}

If I deploy this code with Vercel for example, and try access to http://<some-url>/test/load?info=false is the code/info for query.info == 'true' available?

Of course in this particular case anyone can just try to access to http://<some-url>/test/load?info=true and view the content.

My idea is then try to wrap up the true/false logic into getStaticProps.

My ultimate idea is to render a different html code depending on the props passed by getStaticProps.

Thanks!