Redirects
Answered
Silver posted this in #help-forum
SilverOP
Implementation :
Using app router , I have route /learn and Now I want to redirect this to /learn/articles.
I have also dynamic route for blogs, /learn/[slug] which I wanted to change it to the /learn/articles/[slug].
Solution I have tried :
Attached 2 screenshots regarding the next config and folder structure respectively.
Problems :
1) When I had added this redirects, the /learn page is redirecting to the /learn/article/article , the last article which is extra.
2) The blogs part is working, When I removed the first redirect from the next config, and keep the second one, also added the page.tsx from articles to learn directory.
Is there any solution , that I can build both the functionalities.
PS: blogs are fetched from the contentful , so I can use direct redirect from there also while fetching the content of single blog.
Using app router , I have route /learn and Now I want to redirect this to /learn/articles.
I have also dynamic route for blogs, /learn/[slug] which I wanted to change it to the /learn/articles/[slug].
Solution I have tried :
Attached 2 screenshots regarding the next config and folder structure respectively.
Problems :
1) When I had added this redirects, the /learn page is redirecting to the /learn/article/article , the last article which is extra.
2) The blogs part is working, When I removed the first redirect from the next config, and keep the second one, also added the page.tsx from articles to learn directory.
Is there any solution , that I can build both the functionalities.
PS: blogs are fetched from the contentful , so I can use direct redirect from there also while fetching the content of single blog.
Answered by joulev
looks like this works:
tried with
/** @type {import('next').NextConfig} */
const nextConfig = {
redirects: async () => [
{
source: "/learn",
destination: "/learn/articles",
permanent: true,
},
{
source: "/learn/:slug((?!.*\\barticles\\b).*)",
destination: "/learn/articles/:slug",
permanent: true,
},
],
};
module.exports = nextConfig;tried with
/learn, /learn/articles, /learn/foo, /learn/articles/articles, /learn/particles, all seem to work well31 Replies
@Silver Implementation :
Using app router , I have route /learn and Now I want to redirect this to /learn/articles.
I have also dynamic route for blogs, /learn/[slug] which I wanted to change it to the /learn/articles/[slug].
Solution I have tried :
Attached 2 screenshots regarding the next config and folder structure respectively.
Problems :
1) When I had added this redirects, the /learn page is redirecting to the /learn/article/article , the last article which is extra.
2) The blogs part is working, When I removed the first redirect from the next config, and keep the second one, also added the page.tsx from articles to learn directory.
Is there any solution , that I can build both the functionalities.
PS: blogs are fetched from the contentful , so I can use direct redirect from there also while fetching the content of single blog.
I think it will work if you simply remove the first rule, since /learn and /learn/index are treated as the same thing by next
If not, try removing the first rule and make the second rule /learn/:slug* with the star
SilverOP
so if I removed the first rule, its redirecting properly to the /learn/articles but dynamic route isnt working then
getting this
Oh wait yeah, it just keeps on adding the article part
SilverOP
yes !
Lemme try it
In my laptop
SilverOP
okay thanks mate!
@Silver Implementation :
Using app router , I have route /learn and Now I want to redirect this to /learn/articles.
I have also dynamic route for blogs, /learn/[slug] which I wanted to change it to the /learn/articles/[slug].
Solution I have tried :
Attached 2 screenshots regarding the next config and folder structure respectively.
Problems :
1) When I had added this redirects, the /learn page is redirecting to the /learn/article/article , the last article which is extra.
2) The blogs part is working, When I removed the first redirect from the next config, and keep the second one, also added the page.tsx from articles to learn directory.
Is there any solution , that I can build both the functionalities.
PS: blogs are fetched from the contentful , so I can use direct redirect from there also while fetching the content of single blog.
looks like this works:
tried with
/** @type {import('next').NextConfig} */
const nextConfig = {
redirects: async () => [
{
source: "/learn",
destination: "/learn/articles",
permanent: true,
},
{
source: "/learn/:slug((?!.*\\barticles\\b).*)",
destination: "/learn/articles/:slug",
permanent: true,
},
],
};
module.exports = nextConfig;tried with
/learn, /learn/articles, /learn/foo, /learn/articles/articles, /learn/particles, all seem to work wellAnswer
SilverOP
will check!
what about folder structure?
currently is learn -> articles -> page.tsx and [slug]/page.tsx
the folder structure you posted is good
SilverOP
its again going into loop
clear your browser cache first
the permanent redirects are probably still cached
this is why i use permanent: false when i develop, only change it to true before i deploy
SilverOP
oh yes wait
ohh nice man, this works
what was the issue?
and why are you using this ? - >((?!.\barticles\b).)
@Silver what was the issue?
issue for the looping? thats due to the :slug* which redirects /learn/foo/bar to /learn/articles/foo/bar, so it also redirects /learn/articles to /learn/articles/articles which again is redirected to /learn/articles/articles/articles and so on
@Silver and why are you using this ? - >((?!.*\\barticles\\b).*)
i have to use regex to clear the :slug rule from redirecting when slug is "articles"
@joulev issue for the looping? thats due to the :slug* which redirects /learn/foo/bar to /learn/articles/foo/bar, so it also redirects /learn/articles to /learn/articles/articles which again is redirected to /learn/articles/articles/articles and so on
SilverOP
ahh, got it. I should have thought about it.
but thanks man!
I have learned new thing.
yup, thanks for the question, that was a good question