Next.js Discord

Discord Forum

how to rewrite in next 14 with .mjs config

Answered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hello, I looked at the docs on how to rewrite and it only shows for modules, but what about using .mjs
as below? The rewrite is not working as expected, nothing changes.

/** @type {import('next').NextConfig} */
import withYAML from 'next-yaml';
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/plumbers-in-miami',
      },
    ]
  },
};

export default withYAML(nextConfig);
Answered by joulev
you need to put it inside beforeFiles, by default it's afterFiles
View full answer

52 Replies

Netherland DwarfOP
update: im trying to switch to .js instead
hmmm
nothing changed
// @ts-check
const withYAML = require('next-yaml');
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/plumbers-in-miami',
      },
    ];
  },
};

module.exports = withYAML(nextConfig);
Netherland DwarfOP
Bump ^
perhaps you need to use middleware here
as a workaround
joulev
alright so it turns out it's not a bug but an intended behaviour
joulev
you need to put it inside beforeFiles, by default it's afterFiles
Answer
joulev
see more here, they explain it in quite a lot of details: https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites
import withYAML from "next-yaml";

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: "/",
          destination: "/plumbers-in-miami",
        },
      ],
    };
  },
};

export default withYAML(nextConfig);
Netherland DwarfOP
@joulev thanks, hmm when i do that now on local dev i get page does not exist for "/"
its like it doesnt rewrite or mask the url
hmm wait i think i need a page.tsx with that route /miam right?
i thought i could just change the url let me try this
Netherland DwarfOP
hmm my goal is i want to change the url's name
without creating a route etc
as i dont want to redirect the root path to another path as that causes bad seo for google and other problems...
@Netherland Dwarf hmm my goal is i want to change the url's name
joulev
Not sure what you meant by this.
Netherland DwarfOP
@joulev like i want the default path that is "localhost:3000" to be changed to "localhost:3000/plumbers-in-miami"
kinda like what .htaccess does
joulev
So you want to render /plumbers-in-miami when users navigate to /? With the url still being /?
Netherland DwarfOP
yes
almost like a masking
for google seo
joulev
Then just create app/plumbers-in-miami/page.tsx and do the rewrites config like above?
Netherland DwarfOP
oh i see... so there is no other way then...
its because if i do that
it affects the seo
in a bad way
for too many redirects
joulev
Why does it affect the seo?
Netherland DwarfOP
because currently the website i was hosting in by go daddy so i had to redirect that domain to vercel
joulev
No it’s not a redirect. It’s a rewrite. Google only sees it as /. Heck, google might not even know /plumbers-in-miami exists
Netherland DwarfOP
it also affects using third party services
like semrush
i cant see metrics if i use redirects
joulev
Once again, it’s not a redirect. It is a rewrite. Nextjs routes / to the plumber page.tsx. This process is completely hidden from the clients visiting the page. Google does not know about the rewrite.
Netherland DwarfOP
oh okay
joulev
It’s not a redirect where / returns 3xx telling the client to make another request to /plumber-whatever
Netherland DwarfOP
but does google still read the url?
after the rewrite
joulev
Here / return 200 with the content of the plumber page
@Netherland Dwarf but does google still read the url?
joulev
Google only knows it as /
Netherland DwarfOP
i see so it doesnt change anything
thanks for explainning
i guess i wont use rewrites then
::solved
::solved!
!solved
::marked