Directories and I18N

Answered

Terrier Brasileiro posted this in #help-forum

Terrier BrasileiroOP

2023-09-07T06:59:08.000Z

Hello, I'm a rookie to nextJS, still learning how's everything working. I've ran into an issue.
I have a folder structure src/app where the layout.tsx and page.tsx is located. I added my custom _app.tsx to the src/pages/_app.tsx folder, but it seems that my components aren't working with I18N translations this way.

Answered by not-milo.tsx

next-i18next looks a little outdated to me. A native approach is better in my opinion, and if you really need an external library to do this then I'd suggest using [next-intl](https://next-intl-docs.vercel.app/docs/getting-started)

View full answer

38 Replies

Terrier BrasileiroOP

2023-09-07T07:00:55.000Z

I'm trying to use useTranslation() inside of components folder.

Page loads, but I get an error react-i18next:: You will need to pass in an i18next instance by using initReactI18next.

not-milo.tsx

2023-09-07T07:01:50.000Z

i18n is not trivial to set up and it gets even harder if you use both the app and pages router. I suggest you migrate all your pages to use the app router and then try implementing i18n as shown in Next.js' official examples here: https://github.com/vercel/next.js/tree/canary/examples%2Fapp-dir-i18n-routing

Long term it will be very beneficial to your codebase

Terrier BrasileiroOP

2023-09-07T07:03:32.000Z

How's the hierarchy would look like doing so?

I cannot move my _app.tsx to the src/app directory, because it will not work

not-milo.tsx

2023-09-07T07:05:27.000Z

You can't use _app.tsx directly inside the app router

Terrier BrasileiroOP

2023-09-07T07:05:41.000Z

Understood, but how do I wrap my layout.tsx like the _app.tsx?

import { appWithTranslation } from 'next-i18next';
import type { AppProps } from 'next/app';

import '@styles/globals.scss';

const MyApp = ({ Component, pageProps }: AppProps) => {
    return <Component {...pageProps} />
}
export default appWithTranslation(MyApp);

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Alsteo',
  description: 'Generated by create next app',
}

export async function generateStaticParams() {
  return i18n.locales.map((lng) => ({ lng }));
}

const RootLayout = ({ children, params }: { children: React.ReactNode, params: { lang: string } }) => {
  return (
    <html lang={params.lang}>
      <body className={inter.className}>
        <main>
          <Navigation />
          {children}
        </main>
      </body>
    </html>
  );
}

export default RootLayout;

not-milo.tsx

2023-09-07T07:17:30.000Z

I'm not familiar with next-i18next but they have a blog post detailing how to use it inside the app directory here: https://locize.com/blog/next-13-app-dir-i18n/

The app router works quite a bit differently from the pages router so you might also give a thorough read to [Next.js' documentation](https://nextjs.org/docs/app) about it

Terrier BrasileiroOP

2023-09-07T07:47:49.000Z

I'm not receiving any params, but the function works, what could be an issue?

import '@styles/globals.scss';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

import Navigation from '@/components/navigation/Nav';
import { i18n } from '../../next-i18next.config';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Alsteo',
  description: 'Generated by create next app',
}

export async function generateStaticParams() {
  return i18n.locales.map((lng) => {
    return { lng }
  });
}

const RootLayout = ({ children, params }: { children: React.ReactNode, params: { lng: string } }) => {
  console.log(params);
  return (
    <html lang={params.lng}>
      <body className={inter.className}>
        <main>
          <Navigation />
          {children}
        </main>
      </body>
    </html>
  );
}

export default RootLayout;

not-milo.tsx

2023-09-07T07:59:20.000Z

That's strange, how does your folder structure look like right now?

Terrier BrasileiroOP

2023-09-07T08:13:59.000Z

not-milo.tsx

2023-09-07T08:17:16.000Z

Ooh, the generateStaticParams function needs to be inside the dynamic route. Create a layout.tsx file inside /[lng] and export it from there.

Terrier BrasileiroOP

2023-09-07T08:17:59.000Z

Yeah, but I'm trying to render a page that's in app/page.tsx

it's rendering, but that page doesn't receive any of the params

but when I open app/[lng]/page.tsx, it displays the params there

not-milo.tsx

2023-09-07T08:19:31.000Z

If you're internationalising pages by using dynamic routes then all of your pages need to be inside that directory. Including the home page.

You can't see those params outside a dynamic route

Terrier BrasileiroOP

2023-09-07T08:20:45.000Z

Do you mean that I should remove app/page.tsx?

not-milo.tsx

2023-09-07T08:21:40.000Z

Not remove it, but just place it inside /[lng]

Terrier BrasileiroOP

2023-09-07T08:22:19.000Z

Do I create the layout.tsx for the /[lng]?

not-milo.tsx

2023-09-07T08:23:34.000Z

Take [this](https://github.com/milovangudelj/milovangudelj.com/tree/master/app) as an example. You'll see there's no pages.tsx file inside /app. Everything that needs to be internationalised sits under /[lang]

Yes

Terrier BrasileiroOP

2023-09-07T08:41:07.000Z

Right now there's another issue.
Home page / is getting an error, that there's no page.
After entering http://localhost:3000/en, I still get an error (no page).
After entering http://localhost:3000/hello or anything, that's not the locale, it loads the page.

not-milo.tsx

2023-09-07T08:41:57.000Z

This is likely due to a misconfiguration of your middleware

Terrier BrasileiroOP

2023-09-07T08:42:18.000Z

Is middleware neccessary?

https://locize.com/blog/next-13-app-dir-i18n/
Step 2.0, it has a cookie export, but in settings there's none.

But that's the part of middleware

not-milo.tsx

2023-09-07T08:46:05.000Z

Is this a brand bew application/website you're building?

Terrier BrasileiroOP

2023-09-07T08:46:45.000Z

Yeah

not-milo.tsx

2023-09-07T08:47:03.000Z

Cause if it is, it would be way easier for you to follow the official example and not use any external i18n libraries

Terrier BrasileiroOP

2023-09-07T08:48:30.000Z

This one?

https://nextjs.org/docs/pages/building-your-application/routing/internationalization

not-milo.tsx

2023-09-07T08:48:46.000Z

Answer

not-milo.tsx

2023-09-07T08:49:26.000Z

Nope, this one: https://github.com/vercel/next.js/tree/canary/examples%2Fapp-dir-i18n-routing

Terrier BrasileiroOP

2023-09-07T09:20:26.000Z

Thank you, that helped me a lot

not-milo.tsx

2023-09-07T09:22:06.000Z

I'm glad it did ðŸ˜Ž