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.
Related
I m using nextjs and have configured base path in next.config.js.
It looks something like this
const nextConfig = {
reactStrictMode: true,
output: 'standalone',
basePath: '/new',
};
So now whenever I hit http://localhost:3000/new I get the homepage.
Howevever, when I hit http://localhost:3000 without basePath, I get a 404.
What I want is to get a 200 response with some custom response like OK.
Even if I don't get the custom response text, getting 200 is required.
How to achieve that?
First do this
const nextConfig = {
reactStrictMode: true,
output: 'standalone',
basePath: '/new',
};
Just as you have done already, to the next thing you have to do is to add a middleware just at the root of the page
Then watch for the pathnames that is passed from the request
export async function middleware(req: NextRequest) {
const { nextUrl} = req;
if(nextUrl.pathname === '/'){
return NextResponse.json({hello: "world" });
}
}
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
},
]
},
}
I'm moving from a wordpress site to a new, shiny nextjs site. However, I have hundreds of redirects and I don't want to put them all in the nextjs config file. I like things clean and tidy. I searched around for awhile and didn't find any results on how to do this. Any suggestions?
You need to import it via require, tho remember that u also need to export it as module, so ex.:
const redirectsArray = [
{ source: "/about", destination: "/", permanent: true },
];
async function redirects() {
return redirectsArray;
}
module.exports = {
redirects,
};
and then
const { redirects } = require("./redirects.js");
I got it working while module exporting it as an array instead of an object in the redirects.js
module.exports = redirects
And then add it to the next.config.js like so
async redirects() {
return redirects
}
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*",
},
]
: [];
},
};