example with /app got error 404 using dynamic segment

[chhornponleu]

What version of this package are you using?

{ 
  "dependencies": { 
    "next": "^13.2.1",
    "next-translate": "^2.0.2", 
  },
  "devDependencies": {  
    "next-translate-plugin": "2.0.0", 
  }
}

What operating system, Node.js, and npm version?

Mac M1, Node: v16.19.0, npm: 8.19.3

What happened?

I create dynamic url [userId], and cannot access neither /use123 or /user123/profile. It redirect to error 404 page.

Checkout the repo I extracted from with-app-directory example

https://github.com/chhornponleu/next-translate-app-dir-demo

[awinogrodzki]

I experience the same behaviour with dynamic segments and next-translate-plugin@2.0.2:

// i18n.js
module.exports = {
  locales: ['en', 'pl'],
  defaultLocale: 'en',
  defaultNS: 'dashboard',
  pages: {
    '*': ['dashboard', 'auth', 'elements'],
    '/login': ['auth'],
  },
};

// src/app/clients/[id]/page.tsx
import { loadTenant } from '../../../app-utils/server-utils';
import { loadClient } from '../../../app-utils/api';
import { ClientView } from '../../../app-pages/ClientView';

export default async function ClientPage({ params }: { params: { id: string } }) {
  const tenant = await loadTenant();
  const client = await loadClient(params.id, tenant?.token ?? '');

  return <ClientView client={client} />;
}

When using next-translate-plugin@2.0.2 I get 404 error when trying to render /clients/some-client-id route

[aralroca]

Thanks to report it. I'm going to prioritize it

[aralroca]

BTW; try to use the next-translate & next-translate-plugin in the same version. The last version of the next-translate-plugin is 2.0.2

[awinogrodzki]

I can confirm that the error does also happen with next-translate and next-translate-plugin both in version 2.0.2

[aralroca]

I realize that without next-translate is not working either. With i18n routing and appDir:

next.config.js

module.exports = {
  experimental: { appDir: true },
  i18n: {
    locales: ['en', 'ca', 'es'],
    defaultLocale: 'en'
  }
}

Removing the i18n "works"... 🤔

module.exports = {
  experimental: { appDir: true },
-  i18n: {
-     locales: ['en', 'ca', 'es'],
-     defaultLocale: 'en'
-   }
}

[aralroca]

Related with this issue https://github.com/vercel/next.js/issues/46841

[aralroca]

As a workaround meanwhile Next.js issue is not fixed, you can add this the middleware:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import i18n from "./i18n";

export function middleware(request: NextRequest) {
  const locale = request.nextUrl.locale || i18n.defaultLocale;
  request.nextUrl.searchParams.set("lang", locale);
+  request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, "");
  return NextResponse.rewrite(request.nextUrl);
}

Probably related (or maybe not) to this https://github.com/aralroca/next-translate/issues/993 and this https://github.com/aralroca/next-translate/issues/1005

[aralroca]

I have made a PR to support /[lang] dynamic routing in an easy way.

You can try it with these versions:

• next-translate - version 2.3.0-canary.3
• next-translate-plugin - version 2.3.0-canary.6

Things to keep in mind:

• The pages defined inside i18n.js will have to be updated by adding the /[lang] in front of them.
• No middleware would be needed, unless you want to control a redirect.
• You have to put all current /app pages inside /app/[lang].

I updated the example of next-translate working with /app/[lang] and Next.js 13.4:

https://github.com/aralroca/next-translate/blob/2078477ec299d1287cc20d5245e3781554a1ac39/examples/with-app-directory/

[aralroca]

both ways now are supported (?lang= or /[lang]), but the way using ?lang= needs middleware to do the rewrite and as of Next.js 13.3 it no longer works well, so I've added a second option for people to use until the issue is resolved by the Next.js team.

[aralroca]

Solved in 2.3