Next.js Discord

Discord Forum

308 redirection with permanentRedirect

Unanswered
Upland Sandpiper posted this in #help-forum
Open in Discord
Upland SandpiperOP
Hello everyone.

Here is my code.

It's product page which takes the productSlug in params then is checking if this slug exists in database and if it is valid or not.

If the slug is invalid, there is a redirection to the correct slug.

Example :

Valid slug : http://mysite.com/12-apple-macbook.html => no redirection
Invalid slug : http://mysite.com/12-apple-lkjqsdfqdf.html => redirection to the valid slug

For this redirection, I used "permanentRedirect".

How to check the status code in header ? I would like to make sure that the status code returned is indeed a 308.

I tried on ThunderClient but it returns a 200 status code.

Please help me guys 🙂

export default async function productPage({
  params: { productSlug },
}: productSlugProps) {
  // check if productSlug is present or not
  if (!productSlug) {
    notFound();
  }

  // get the product from the slug in params
  const askedProduct = await getProduct(productSlug);
if (!askedProduct) {
    notFound();
  }

  const slugInDatabase = askedProduct.slug;
  const isSlugValid = await checkProductSlug(slugInDatabase, productSlug);

  if (!isSlugValid) {
    permanentRedirect(`/${askedProduct.id}-${askedProduct.slug}`);
  }

  return (
    // rendering product page
  );
}


Thanks a lot.

99 Replies

Upland SandpiperOP
hello Ray. Here is the result :

HTTP/1.1 200 OK
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 10:07:03 GMT
Connection: keep-alive
Keep-Alive: timeout=5

It's not a 30x redirection.
Ray
are you trying with next build & next start or next dev?
Upland SandpiperOP
oh no. Do I have to ?
in devlopment, it's not possible to test so ?
Ray
not sure, just asking. I just tried it return 308 in next dev
Upland SandpiperOP
cool, let me test it.

But how to return back then ?
Ray
let me try with next start rq
oh I got 200 with next start
Upland SandpiperOP
oh
Ray
ah I think i see the problem
Upland SandpiperOP
so there is a problem ?
Ray
because the productPage is static generated?
Upland SandpiperOP
how to know it
Ray
there is a report after you run next build
and the symbol will tell you
Upland SandpiperOP
ok I will run it but will it change something, may I come back to dev mode
Ray
Ok I got 308 if the page is ISR or SSR
Upland SandpiperOP
so there is a problem ?
or is it normal ?
Ray
normal
the page need to be ISR or SSR to do the redirect
Upland SandpiperOP
in dev mode, it's a 200 status code, it's normal. Then in production mode, it will redirect with 308. Is it your meanings ?
Ray
no in dev mode, it always return 308 for me
if you get 200 in dev mode, I think there might be a problem with your function?
Upland SandpiperOP
what is your code please ?
Ray
try console.log the value
@Ray try console.log the value
Upland SandpiperOP
which value ?
Ray
isSlugValid
Upland SandpiperOP
no it's correct for that
Ray
I just invoke permanentRedirect directly in the componet
Upland SandpiperOP
the redirection is made
Ray
where are you redirectting to
Upland SandpiperOP
to the right slug from the database
Ray
the destination will return 200 to you
Upland SandpiperOP
yes
I would like to make sure that the status code returned is indeed a 308.
Ray
HTTP/1.1 308 Permanent Redirect
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Location: /json
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 10:22:39 GMT
Connection: keep-alive
Keep-Alive: timeout=5
this is what i get from curl -X HEAD -I http://localhost:3000
Upland SandpiperOP
ok I will try it later
thanks !
Upland SandpiperOP
Hi again. I tried this : 

import { permanentRedirect } from "next/navigation";

const page = () => {
  permanentRedirect("/");
};

export default page;


Here is the result when I launch :

curl.exe -X HEAD -I http://localhost:3000/redirect

HTTP/1.1 200 OK
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 17:48:14 GMT
Connection: keep-alive
Keep-Alive: timeout=5

It's still a 200 status code. I don't know how to reproduce your 308.
Upland SandpiperOP
where to put it ?
Ray
import { permanentRedirect } from "next/navigation";

// either one
export const revalidate = 100 
export const dynamic = 'force-dynamic'

const page = () => {
  permanentRedirect("/");
};

export default page;
Upland SandpiperOP
nop
still the same
Ray
are you running next dev or next start
Upland SandpiperOP
run dev lol
npm run dev

I don't know what is next dev or next start
Ray
how do you start the server
Upland SandpiperOP
npm run dev
Ray
so its dev
Upland SandpiperOP
yes
Ray
what version of next?
Upland SandpiperOP
14.0.1
Ray
try update to latest
npm install next@latest
curl -X HEAD -I http://localhost:3000/redirect
HTTP/1.1 308 Permanent Redirect
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Location: /
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 17:57:32 GMT
Connection: keep-alive
Keep-Alive: timeout=5
i use exact same code with you
but im on next 14.0.4
Upland SandpiperOP
I updated to 14.0.4 and still the same 😦
Ray
oh well lol
try rm node_modules and .next?
Upland SandpiperOP
ok
I did, and install, the same issue
Ray
ah
can you try create new project and test?
Upland SandpiperOP
ok
Ray
curl -X HEAD -I http://localhost:3000/redirect
HTTP/1.1 308 Permanent Redirect
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Location: /
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 18:02:53 GMT
Connection: keep-alive
Keep-Alive: timeout=5

i got 308 with 14.0.3 too
Upland SandpiperOP
😦
Ray
im trying 14.0.1
curl -X HEAD -I http://localhost:3000/redirect
HTTP/1.1 308 Permanent Redirect
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Location: /
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 18:04:29 GMT
Connection: keep-alive
Keep-Alive: timeout=5
still 308
Upland SandpiperOP
ok with a new project it's 308 !!!!!
Ray
ah not sure what happen with your other project
Upland SandpiperOP
wtf did I do....
Ray
no idea lol
Upland SandpiperOP
really no idea ?
Ray
no idea, permanentRedirect is so new
maybe go check github issue or you can report with your reproduction
Upland SandpiperOP
ok thanks for all
Upland SandpiperOP
Eureka !
Yata !
I have a "loading.tsx" page
when I remove it, status code is 308
why ?
here is the code of my loading page : 

import Container from "@/components/ui/container";
import { Skeleton } from "@/components/ui/skeleton";

export default function Loading() {
  return (
    <Container>
      <div className="h-full w-full">
        <Skeleton className="mb-10 mt-5 aspect-square w-full rounded-xl md:aspect-[4/1]" />
        <div>
          <div className="lg:grid lg:grid-cols-5 lg:gap-x-8">
            <div className="lg:block">
              <Skeleton className="aspect-square rounded-xl" />
            </div>
            <div className="mt-6 lg:col-span-4 lg:mt-0">
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
                <Skeleton className="aspect-square rounded-xl" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  );
}


it's located in the app folder. Nothing special, right ?

------------
curl.exe -X HEAD -I http://localhost:3000/redirect

HTTP/1.1 308 Permanent Redirect
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url, Accept-Encoding
Location: /
Cache-Control: no-store, must-revalidate
X-Powered-By: Next.js
Content-Type: text/html; charset=utf-8
Date: Sat, 09 Dec 2023 18:56:45 GMT
Connection: keep-alive
Keep-Alive: timeout=5
I tried this : 

export default function Loading() {
  return (
    <div>Wait !</div>
  );
}


still not working, so I conclude that "PermanentRedirect" is not compatible with "loading.tsx"
Upland SandpiperOP
has it something to do with : https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming
too hard to understand for me 😦
Upland SandpiperOP
I just tried with a new project, and the loading.tsx prevent to send a 308 status code.
Upland SandpiperOP
😭
Ray
I think you should create an issue on github
and let them know what you found
Upland SandpiperOP
https://github.com/vercel/next.js/issues/59464
I hope it's clear enough
Upland SandpiperOP
still no news 😦