Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – next.js 14 How to use decoded url in app router (way to configure Korean URL)

my request…
http://localhost:3000/docs/시작하기

nextjs
GET /docs/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 200 in 97ms

Is there a way to configure Korean URL addresses to be routed in nextjs?

I tried configuring the middleware… but ERR_TOO_MANY_REDIRECTS ocured, somebody help me!!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    app > docs > [category] > [mdx] > page.tsx

    export default async function MDXRemotePage({params}: { params: Params }) { const {category, mdx} = params; const sidebar: Sidebar = sidebarJson

    const decodeCategory = decodeURIComponent(category);
const item = decodeURIComponent(mdx);


if (sidebar[decodeCategory] && sidebar[decodeCategory].includes(item)) {
    const filePath = path.join(process.cwd(), 'docs', decodeCategory, `${item}.mdx`);
    try {
        const fileContent = fs.readFileSync(filePath, 'utf8');
        return <MDXRemote components={useMDXComponents} source={fileContent} />;
    } catch (error) {
        return <div>File not found</div>;
    }
} else {
    return <div>Page Not Found</div>;
}

    }


  2. 0

    You can use Path Params to get the Korean content and then decode it using the decodeURIComponent method.

    How to create this dynamic param:

    • Wrap the file or folder name in square brackets. For example, [KoreanInput] can represent docs slugs.
      Access dynamic segments using useRouter().query.slug. Example route: /docs/[KoreanInput].js where { KoreanInput: '%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0' };
    • Now read it and decode it using decodeURIComponent(KoreanInput), it will return actual Korean Content.

    Or

    • You can use rewrites in your next.config.js file
    • basically, you need to use i18n and then define routes like below:
        // next.config.js
    module.exports = {
        async rewrites() {
            return [
                {
                    source: '/docs/시작하기',
                    destination: '/docs/english-route',
                    locale: false
                }
            ];
        }
    };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search