How to create route name include @?
Answered
Savannah posted this in #help-forum
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.
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",
},
],
};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.
@Savannah I did this. Is it right?. Before that I created folder name is "@phong", when I visit localhost:3000/@phong I got 404.
i just tried and indeed this doesn't work
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
but yeah i do think the
// 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