Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Example needed] i18n with Next.js 13 and `app` directory

See original GitHub issue

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Home Binaries: Node: 16.15.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 13.0.1-canary.0 eslint-config-next: 13.0.0 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Local

Describe the Bug

Setting up i18n test in next.config as follows:

experimental: {
    appDir: true
  },
i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    localeDetection: true
  },

I’ve deleted pages and added a few files into the new /app folder to test

Creating a simple component like so:

import { ReactNode } from 'react';

export default function Layout({ locale, children, ...rest }: {
  children: ReactNode;
  locale?: string;
}) {
  console.log('rest', rest);
  return <main className="layout">
    <header><h3 style={{ color: 'tomato' }}>{locale || 'nope'}</h3></header>
    {children}
  </main>;
}

I’m not seeing any locale information provided via the props. I was thinking this would be provided on the server side for rendering locale specific data on the server.

Expected Behavior

I would expect to be passed the current locale for use within sever components layouts/pages.

Link to reproduction

https://github.com/jimmyjamieson/nextjs-13-ts

To Reproduce

npm dev, check output of props, locale in layout

Issue Analytics

State:
Created a year ago
Reactions:15
Comments:51 (13 by maintainers)

Top GitHub Comments

36reactions

leerobcommented, Nov 5, 2022

Just want to follow up here and say an example for how to use i18n with the app directory is planned, we just haven’t made it yet!

We will be providing more guidance on solutions for internationalized routing inside app. With the addition of generateStaticParams, which can be used inside layouts, this will provide improved flexibility for handling routing when paired with Middleware versus the existing i18n routing features in pages/.

22reactions

timneutkenscommented, Nov 8, 2022

@aej11a the example will have pretty much the same features but leverages other features to achieve the intended result so that you get much more flexibility, the most common feedback around the i18n feature has been “I want to do x in a different way” so it made more sense to leave it out of the built-in features and instead provide an example to achieve the same.

I can’t share the full example yet because there’s a few changes needed in order to mirror the incoming locale matching.

The short of it is:

Middleware handles incoming request matching to a locale. This is better than what we have today because it could only run on /, whereas middleware runs on all navigations.
Root layout with generateStaticParams:

// app/[lang]/layout.ts
export function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'nl' }, { lang: 'de' }]
}

export default function Layout({children, params}) {
  return <html lang={params.lang}>
	<head></head>
    <body>{children}</body>
  </html>
}

Reading lang in page/layout:

// app/[lang]/page.ts
export default function Page({params}) {
  return <h1>Hello from {params.lang}</h1>
}

Using additional dynamic route parameters as static:

// app/[lang]/blog/[slug]/page.js
export function generateStaticParams({params}) {
  // generateStaticParams below another generateStaticParams is called once for each value above it
  const lang = params.lang
  const postSlugsByLanguage = getPostSlugsByLanguage(lang)
  return postsByLanguage.map(slug => {
    // Both params have to be returned.
    return {
      lang,
	  slug
    }
  })
}

export default function BlogPage({params}) {
  return <h1>Dashboard in Language: {params.lang}</h1>
}

Top Results From Across the Web

i18n with Next.js 13 and app directory (an i18next guide) - locize

Looking for a way to internationalize your Next.js 13 project with the new app directory feature? Then this guide is for you!

Advanced Features: Internationalized Routing - Next.js

Next.js has built-in support for internationalized (i18n) routing since v10.0.0 . You can provide a list of locales, the default locale, and domain-specific ......

Why internationalization is not working on NextJS 13 using a ...

Create a dynamic route [locale] in the app directory and put all other routes there. Set middleware so it redirects all traffic from...

Next.js internationalization (i18n) tutorial - Localizely

By running the command below, we will create a new Next.js project called nextjs-i18n-example in a folder with the same name. npx create-next- ......

i18n with Next.js 13 and app directory : r/javascript - Reddit

2.3M subscribers in the javascript community. All about the 𝚓𝚊𝚟𝚊𝚜𝚌𝚛𝚒𝚙𝚝 programming language!