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*'
}
]
}
}
Related
I want to use the URL params and Queries into the vue router defining file in order to set the title name dynamically.
I tried to use the $route.params.paramName format:
const routes = [
{
path: '/rooms/:room/:id?',
name: `${$route.params.room}`,
component: RoomsView,
meta:{
title: `${$route.params.room} ${$route.params.id} - WebsiteName`
}
}
]
Do you know how can I access these values?
I think it's best to let the component itself render the logic with something like
computed: {
title() {
const { name, id } = this.$route.params;
return `${name} ${id} - WebsiteName`;
}
}
I think the docs would give you some useful insight as well
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
}
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.
I installed and add this code to my nuxt.config.js and it works perfectly fine. (Link to package)
modules: [
['#nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }],
]
Now I am trying to implement instead of a static ID a function which will return an ID.
I tried to add this lines into my nuxt.config. js but it is not working. Obviously I have to put it somewhere else or so...
This is what I tried
nuxt.config.js
const code = '1234567'
id: () => {
return 'GTM-' + code
}
export default {
...
modules: [
['#nuxtjs/google-tag-manager', { id: id }],
]
...
}
What would be the correct way implementing this?
I would like to do something like that at the end.
modules: [
['#nuxtjs/google-tag-manager', {
id: ({ req }) => {
if (req.headers.referer == "exmple.com")
return 'GTM-156'
if (req.headers.referer == "exmple.it")
return 'GTM-24424'
if (req.headers.referer == "exmple.es")
return 'GTM-2424'
}
}]]
EDIT:
I solved my problem by rewriting the whole module. It is not possible to use this Module because it is loaded only on build time. I rewrote the module and moved the code into nuxtServerInit.
nuxtServerInit is called on each request (modules only onetime). In the request I asked from which domain the request is coming. Depending on the domain I add different google-tag-manager id's to the head and the plugin.
From package docs:
modules: [
['#nuxtjs/google-tag-manager', {
id: () => {
return axios.get('http://example.com/')
.then(({ data }) => {
return data.gtm_id
})
}
}]]
You can use process.env.NODE_ENV inside function which will return an ID
Edit 1
To put the gtm id, depending on req.headers.referer you need to provide context to the function returning the id. This can be done in middleware
See how it works here
https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/plugin.js
Edit 2
As far as I understand your question, it will not work to have a query context in the config.
Look at i18n middleware: request.locale - > store - > update modules (router, vuetify, moment, etc.)
https://nuxtjs.org/examples/i18n/
~/middleware/gtm.js
export default function ({ app, store }) {
// app.$gtm contains id, you can set another from store
}
don't forget to add middleware to the page
page.vue
export default {
middleware: ['gtm']
}