I have the following addresses /blog/post-1, /blog/post-2 and I want to rewrite all paths to /post-1, /post-2. I configure in the file next.config.js as follows
async rewrites() {
return [
{
source: '/:slug',
destination: '/blog/:slug',
},
]
}
However, the old path and the new path both work? What should I do?
You have them set up the wrong way around if you are trying to redirect from /blog/post-1 to /post-1/ and you need the path parameter.
From the docs https://nextjs.org/docs/api-reference/next.config.js/rewrites
module.exports = {
async rewrites() {
return [
{
source: '/blog/:path*',
destination: '/:path*', // The :path parameter is used here so will not be automatically passed in the query
},
]
},
}
Related
My problem is : I have pages/blog.js file in my project. I did localized urls like down below in the next.config.js file.
i18n:{
locales:["tr","en"],
defaultLocale:"tr"
},
async rewrites(){
return [
{
"source":"/tr/makaleler",
"destination":"/blog",
"locale":false
},
{
"source":"/en/articles",
"destination":"/blog",
"locale":false
}
]
}
It works. But problems is ; I can still access with this localhost:3000/blog. I want to make it only accessible with localhost:3000/makaleler or localhost:3000/en/articles.
Is there any way to achieve this? I have read "nextjs" documentation bu couldn't find anything useful.
Essentially what you want is not possible, The reason is if you restrict access to localhost:3000/blog by any means, then your rewrites will stop working as well.
What you probably need is redirects from localhost:3000/blog to the desired locale for your users. You can leverage Accept-Language header for example:
async redirects() {
return [
{
source: '/blog',
has: [
{
type: 'header',
key: 'accept-language',
// header starts with tr
value: 'tr(.*)',
},
],
destination: '/tr/makaleler',
permanent: false,
},
{
source: '/blog',
has: [
{
type: 'header',
key: 'accept-language',
// header does not start with tr
value: '((?!tr$).*)',
},
],
destination: '/en/articles',
permanent: false,
},
]
}
You should use Next.js Middleware in version 12.2 if you want to implement complex redirect logic based on language (or anything). You can find a quick tutorial by Vercel in Youtube here: https://youtu.be/j7rPSS9Ovsw?t=296
Let's just say I want to redirect my index page to the about page in Next.js. It seems like I have 2 options:
1. Adding the redirects key in next.config.js
module.exports = {
async redirects() {
return [
{
source: '/',
destination: '/about',
permanent: true,
},
]
},
}
2. Returning the redirect object inside the getServerSideProps() function
// pages/index.js
export async function getServerSideProps() {
return {
redirect: {
destination: '/about',
permanent: true,
},
};
};
What is the difference between these 2 options?
According to your logic, they're the same in terms of functionality, but redirect on your page pages/index.js will have more flexibility and more customization. For example, you want to redirect to another page conditionally like below
// pages/index.js
export async function getServerSideProps() {
const value = true; //receive data from APIs
//if value is true, redirect to `/help` instead of `/about`
if(value) {
return {
redirect: {
destination: '/help',
permanent: true,
},
};
}
//TODO: You can add your logic here before redirection
return {
redirect: {
destination: '/about',
permanent: true,
},
};
};
You cannot achieve that logic with redirects() under next.config.js. You can imagine that it's like configurations being only applied once without the complicated logic requirement.
You can consider these use cases:
If you don't want to have complicated routing logic and just use them as one-time setups - Use redirects() in next.config.js
If you have some logic to handle routings in pages and it's relied on external resources - Use redirect in pages themselves
When I navigate to http://localhost:3000/users/123?foo=bar of my nextjs app
I get the following when I print out router.query
{id: "123"}
What could be the reasons it is not adding foo: 'bar' to the query object?
Your file layout should look like this:
pages/
users/
[id].js
Having just tested this, the returned query object is {"foo":"bar","id":"123"}.
I had to add a next.config.js file with the following
module.exports = {
reactStrictMode: true,
async rewrites() {
return [
{
source: '/pages/:slug*',
destination: '/:slug*'
}
]
}
}
I hope this question is clear, I am somewhat at the end of my mental resources at the moment.
I have some Nginx rewrites happening in production, I need to reproduce this functionality in my nextjs app on the frontend.
So my rewrites rules look like the following
const rewrites = process.env.NODE_ENV === "development" ?
[{
source: '/ovp/userdevices',
destination: 'https://userdevices.backendservices.dk'
},
{
source: '/ovp/userdevices/:path*',
destination: 'https://userdevices.backendservices.dk/:path*'
}
] : [];
and in my configuration
async rewrites() {
console.log("Rewrites called");
return rewrites;
},
I get the console log, and the array is what it is supposed to be. But my /ovp/userdevices urls never get rewritten, and so we are always running localhost:3000/ovp/userdevices.
I am supposing at the moment that the rewrites never happen because these are supposed to be done on the serverside and maybe everything is being rendered frontend but I don't know how to test this supposition.
My current config looks like
{
poweredByHeader: false,
target: 'serverless',
distDir: 'build',
basePath: '',
rewrites: [AsyncFunction: rewrites],
redirects: [AsyncFunction: redirects],
pageExtensions: [ 'route.js' ],
env: {
SUPPORTED_BROWSERS: 'chrome 84;chrome 83;edge 84;edge 83;firefox 79;firefox 78',
APP_VERSION: '0.0.1',
APP_NAME: 'some-app/app-self-service'
},
webpack: [Function: webpack]
}
Can anyone point me to a reason why the rewrites would not be happening?
On Edit: I'm not going to delete the question in that maybe someone will find a use for it, but I was wrong, it was being rewritten it's just the url it was going to was failing. I didn't figure out why because I found a simpler hack to solve my problem.
You can't use the name rewrites twice. Make next.config.js look like this:
module.exports = {
async rewrites() {
console.log("Rewrites called");
return process.env.NODE_ENV === "development"
? [
{
source: "/ovp/userdevices",
destination: "https://userdevices.backendservices.dk",
},
{
source: "/ovp/userdevices/:path*",
destination: "https://userdevices.backendservices.dk/:path*",
},
]
: [];
},
};
I'm trying to implement pagination in my application by rewriting numbers in the path to the query var ?page. I got it to work more or less, but the string part of the path gets cut in half.
My next.config.js looks like this:
const withImages = require('next-images');
module.exports = withImages({
async rewrites() {
return [
{ source: '/categoria/:slug*(\\w{1,})', destination: '/category/:slug*' },
{ source: '/categoria/:slug*(\\w{1,})/:page(\\d{1,})', destination: '/category/:slug*/?page=:page' },
];
}
});
The route I'm working with is /category/[...slug].
I tried changing \\w{1,} to \\w+, [a-z-]{1,}, [a-z-]+ and all of them ended up giving the same result.