Next.js Discord

Discord Forum

How to create route name include @?

Answered
Savannah posted this in #help-forum
Open in Discord
SavannahOP
Hello, I'm building my personal site with Next.js 13 AppDir.
I want to create a page like mywebsite/@myname
I configured a folder in App/ with the name "@myname" but it is not working.
How to create route name includes @ ? Please help me. Thank you so much.
Answered by joulev
for now make /phong and rewrite /@phong to it
// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  rewrites: async () => [
    {
      source: "/@hello",
      destination: "/hello",
    },
  ],
};
View full answer

12 Replies

Try app/%40myname
@joulev Try app/%40myname
SavannahOP
Still not working 😦
Hmm then the trick used for underscores isn’t working… I’ll try tonight when I open my laptop
@Savannah Still not working 😦
Masai Lion
it has to work, it works for me
@Savannah Still not working 😦
How did you write it?
@alfon How did you write it?
SavannahOP
I did this. Is it right?. Before that I created folder name is "@phong", when I visit localhost:3000/@phong I got 404.
i think it is just not supported yet, maybe i'll make a feature request
for now make /phong and rewrite /@phong to it
// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
  rewrites: async () => [
    {
      source: "/@hello",
      destination: "/hello",
    },
  ],
};
Answer
@joulev i think it is just not supported yet, maybe i'll make a feature request
SavannahOP
I will. I think currently rewrite is the best. Thank you so much
@Savannah I will. I think currently rewrite is the best. Thank you so much
you can also use a dynamic route like this
// app/[dynamic]/page.tsx
export default function Page() {
  return "Success";
}

export function generateStaticParams() {
  return [{ dynamic: "@test" }];
}

export const dynamicParams = false;

but yeah i do think the %40 approach should work. I just filed a bug report: https://github.com/vercel/next.js/issues/52391