#how to make non-english urls to work in next.js

1 messages · Page 1 of 1 (latest)

arctic olive
#

.

ashen spokeBOT
#

Hi @arctic olive. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Next.js supports internationalized routing, which allows you to use non-English URLs. Here's how you can set it up:

  1. Define your locales: In your next.config.js file, you need to define the locales your application supports and the default locale. For example:
module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'nl-NL'],
    defaultLocale: 'en-US',
  },
}

In this configuration, en-US, fr, and nl-NL are available to be routed to, and en-US is the default locale. If you have a pages/blog.js, the following URLs would be available: /blog, /fr/blog, /nl-nl/blog. The default locale does not have a prefix (source (https://nextjs.org/docs/pages/building-your-application/routing/internationalization#locale-strategies)).

  1. Use the Link component: The active locale is automatically prepended to the href attribute in the Link component. You can also specify a different locale or disable locale prepending:
import Link from 'next/link'
 
export default function Home() {
  return (
    <>
      {/* Default behavior: locale is prepended */}
      <Link href="/dashboard">Dashboard (with locale)</Link>
 
      {/* Disable locale prepending */}
      <Link href="/dashboard" locale={false}>
        Dashboard (without locale)
      </Link>
 
      {/* Specify a different locale */}
      <Link href="/dashboard" locale="fr">
        Dashboard (French)
      </Link>
    </>
  )
}

(source (https://nextjs.org/docs/pages/api-reference/components/link#locale))

  1. Handle dynamic locales: If you want to handle different locales dynamically in your routes, you can nest special files inside app/[lang]. This allows the Next.js router to forward the lang parameter to every layout and page:
# 
// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({ params: { lang } }) {
  return ...
}

(source (https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview))

Please note that there have been some issues reported with non-English characters in URLs in Next.js, particularly with dynamic routes and server-side rendering (source (https://github.com/vercel/next.js/issues/53426), source (https://github.com/vercel/next.js/issues/10084)). If you encounter any issues, you may need to encode the URL in development mode and decode it in production mode as a workaround (source (https://github.com/vercel/next.js/issues/10084)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@arctic olive kapa.ai is still learning and improving, please let us know how it did by reacting below

arctic olive
#

@ashen spoke i want to make a url like this/пользователь work

ashen spokeBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To make a URL like /пользователь work in Next.js, you can simply create a new page in your pages directory with the name пользователь.js. Next.js supports Unicode paths, so this should work out of the box.

However, if you're using dynamic routes, you might encounter issues as there have been some reported problems with non-English characters in URLs, particularly with dynamic routes and server-side rendering (source (https://github.com/vercel/next.js/issues/53426), source (https://github.com/vercel/next.js/issues/10084)).

If you encounter any issues, you may need to encode the URL in development mode and decode it in production mode as a workaround (source (https://github.com/vercel/next.js/issues/10084)).

For example, if you have a dynamic route like /user/[id], and you want to navigate to /user/пользователь, you might need to do something like this:

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  const handleClick = () => {
    // Use encodeURIComponent to encode the URL
    router.push(`/user/${encodeURIComponent('пользователь')}`)
  }

  return <button onClick={handleClick}>Go to user</button>
}

And then in your dynamic page, you can decode the URL:

import { useRouter } from 'next/router'

export default function UserPage() {
  const router = useRouter()

  // Use decodeURIComponent to decode the URL
  const userId = decodeURIComponent(router.query.id)

  return <div>User ID: {userId}</div>
}

Please note that this is a workaround and might not be necessary in all cases. It's always a good idea to test your application thoroughly to ensure that all routes are working as expected.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: