Localization with App Router

[covert torrent]

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

---

To achieve localized slugs with Next.js, you can follow these steps:

1. Configure your next.config.js file with the locales and defaultLocale:

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'sv'],
    defaultLocale: 'en',
  },
}

2. Create separate pages for each language and their respective slugs. For example, for the About page, create two files: pages/en/about.js and pages/sv/om-oss.js. Similarly, for the Blog page, create two files: pages/en/blog/[slug].js and pages/sv/blogg/[slug].js.

3. In your dynamic route files (e.g., pages/en/blog/[slug].js and pages/sv/blogg/[slug].js), use the useRouter hook from 'next/router' to access the slug parameter:

// pages/en/blog/[slug].js and pages/sv/blogg/[slug].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { slug } = router.query

  return <h1>Post Slug: {slug}</h1>
}

4. For generating static paths with localized slugs, you can use getStaticPaths in your dynamic route files:

// pages/en/blog/[slug].js and pages/sv/blogg/[slug].js
export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      { params: { slug: 'post-1' }, locale: 'en' },
      { params: { slug: 'post-1' }, locale: 'sv' },
    ],
    fallback: true,
  }
}

This setup will allow you to have localized slugs for your About and Blog pages in both English and Swedish.

Sources:

• Internationalized Routing (https://nextjs.org/docs/advanced-features/i18n-routing)
• Dynamic Routes (https://nextjs.org/docs/routing/dynamic-routes)

---

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