How to Redirect in getStaticProps

[Kiarash-Z]

Hi, I need to check the existence of a JWT token to navigate the user to the correct route. I put my token validation stuff in getStaticProps function. How can I redirect the user to another route in getStaticProps function? I have tried this, but it's not working:

async (context: NextPageContext): Promise<{ props: { token: string } }> => {
  const { token } = nextCookies(context);
  console.log(context) // {}
  if (!token) {
    if (typeof window === 'undefined') {
      // ❌ I get no 'res' key on context for redirection so this throws an error
      context.res.writeHead(302, { Location: '/phone-get' });
      context.res.end();
    } else {
      /* ❌
        this wouldn't work as well. Because the router is not available here.
        The next router only works on the client side
      */
      Router.replace('/phone-get');
    }
  }

  return {
    props: { token },
  };
};

[aralroca]

getStaticProps is not a middleware before rendering the page. Is executed on the build step. So I think that is not possible.

[redreceipt]

For Googlers, getStaticProps supports redirects now

https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

[goranefbl]

Does getStaticProps run after build? On every page render, I don't think so.

[msafi]

And here's the same code but in text 😆

async function getStaticProps(context) {
  const res = await fetch('https://...');
  const data = await res.json();

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }

  return {
    props: { data },
  };
}

[amritk]

Wait, if it works now. Why am I seeing

Error: 'redirect' can not be returned from getStaticProps during prerendering

[timfuhrmann]

Wait, if it works now. Why am I seeing

Error: 'redirect' can not be returned from getStaticProps during prerendering

Can't have it prerendered - you either have to use fallback true or blocking and must not return a path behind a redirect from getStaticPaths

[stormfar]

An extension of this request, is it possible to redirect the user before the page is generated in getStaticProps? I would like interpret the data fetched in getStaticProps and then stop the generation of that page if necessary.

[aralroca]

I guess that is not possible because getStaticProps runs in "build" time, and earlier is not possible.

[stormfar]

But with getStaticPaths fallback, pages are generated on first visit. This is a pity, because even though I can redirect on the client, generated (spam) pages I don't want can negatively impact SEO.

[MohammadPCh]

Do you find any solution?

[AshConnolly]

Agree with @5tormTrooper.
It would be great to intercept the url before static generation. Without this, pages could be getting duplicated.

For example if I have a dynamic page that takes the param, say a band name, and statically generates using a query parameter to fetch band information, I could end up generating two pages with the same content.
If a user visits:
/music/Daft Punk (becoming /music/Daft%20Punk) and /music/daft-punk the param is the same, but the page is generated twice.

Additionally is there any automatic url prettifying available in Next.js?

[AshConnolly]

For anyone curious I have this helper function solution to solve the above issue. It redirects to a prettier URL as soon as the page renders:

const redirectIfSpacesInUrl = (path, router) => {
  if (typeof window == 'undefined') return // to ensure it does not break SSR
  if (path.includes('%20')) {
    var split = path.split('/')
    var hyphenatedName = split[split.length - 1].replace(/%20/g, '-').toLowerCase()
    router.replace('/path-name/[slug]', `/path-name/${hyphenatedName}`)
  }
}

And used like so:

const Page = props => {
  const router = useRouter() 
  redirectIfSpacesInUrl(router.asPath, router)
  ...

Importantly as far as I can tell using this method does not render the page twice, nor download the assets twice.

[MohammadPCh]

[brianlovin]

@MohammadPCh since this was also asked in #12613, it might be good to open your question as a separate issue. It does seem useful to have a single place to discuss abuse prevention or potential rate limiting strategies.

[IRediTOTO]

You should redirect in useEffect
You can't do that in getStaticProps (it only run when you type npm run build), you can redirect in getServerSideProps, I tried with getServerSideProps but it will make your site load slow :\ so I must use useEffect now.
I am finding a solution better than useeffect too. The protected page still render too fast before redirect.

[tomaszferens]

I would also like to have some way to do the redirect on the server when accessing a static page with authentication cookie.

I tried to do client-side redirect in useEffect, but that resulted in a flash, where the static page was being displayed before the redirect (and authentication request) happened.

I also tried to do the redirect in a separate JS script tag in HTML head that would run before the page could be painted, like this:

<html>
    <head>
        <script>
            if (document.cookie.includes('authentication')) {
                window.location.href = '/account';
            }
       </script>
    </head>
    <body>
        <div id="__next"></div>
    </body
</html>

unfortunately still, no luck, there was a flash between static page and authenticated page.

I ended up rendering the whole page in a div with display: none; style, that waits for authentication to happen. Hope that doesn't affect SEO much.

[timneutkens]

Opened a RFC here: #14890

[noghartt]

Using next/export, is there any way to redirect from a route to another?

What I did is just something like it:

import type { GetStaticProps } from 'next';

const Join = () => <div></div>;

export const getStaticProps: GetStaticProps = async () => ({
  redirect: {
    destination: 'https://app.woovi.com/join',
    permanent: true,
  },
});

export default Join;

[timfuhrmann]

No a redirect won't work for a static export since both fallback "false" and "blocking" are not supported, which means "getStaticProps" can only be executed on build and redirects can't be pre-rendered.

[noghartt]

No a redirect won't work for a static export since both fallback "false" and "blocking" are not supported, which means "getStaticProps" can only be executed on build and redirects can't be pre-rendered.

Oh, I get it. I have another way to do it using useEffect. Thanks!

Do you know any other way to do it?

[timfuhrmann]

Before middleware there was a practice of adding a script to the head to execute the redirect logic even before react js - something like this:

<Head>
    <script id="auth-redirect">
        {`
            if (!document.cookie || document.cookie.indexOf("authenticated=") === -1) {
                location.replace("yourRedirectUrl")
            }
        `}
    </script>
</Head>

I don't know whether this solution suits your problem though.