examples/with-app-directory not working when upgrade to latest next and reactjs

[chhornponleu]

I cloned the react-translate/examples/with-app-directory and use latest next, react, next-translate. checkout this repo https://github.com/chhornponleu/next-translate-app-dir-demo.

What happened? http://localhost:3000 and http://localhost:3000/en works, while http://localhost:3000/ca, http://localhost:3000/es got error 404.

What did you expect to happen? http://localhost:3000/ca, http://localhost:3000/es should render using the selected locale

Are you willing to submit a pull request to fix this bug? Not sure if I am capable of it.

[aralroca]

Looks rare @chhornponleu, I cloned your repo and works fine:

The repo example is also in Codesandbox and works fine https://codesandbox.io/p/sandbox/next-translate-app-dir-fw68h2?file=%2Fsrc%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A6%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A6%7D%5D

Also, I try it the current next-translate example now locally with Next.js 13.2 and Next-translate-plugin 2.0, and is working fine 😅

Would you provide more info about your SO, node version, etc?

I tried with Node.js v16.19.0 and v18.13.0 and both work fine. Thanks to report it!

[marcelotk15]

I have the same problem even using the next-translate-plugin version 2.0.2:

It only accept if change defaultLocale config for that specific lang.

OS: W11 with WSL1 Node: 16.17.1 NPM: 8.15.0

[aralroca]

It looks like a middleware problem... I'm going to take a look at the problem. Thanks to report it

[marcelotk15]

@aralroca @chhornponleu

With aralroca's report about can be the middleware, I debugged and maybe found the problem: request.nextUrl.href is using the lang code in the pathname part but when it is not the defaultLocale it's not using.

Probably the fix, for me is now working fine.

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)

 // THIS LINE
  request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, '')

  return NextResponse.rewrite(request.nextUrl)
}

[aralroca]

Good catch @marcelotk15 at least is not an issue from the library, a bad middleware implementation in the example!! I'm going to fix it (or feel free to PR)! Thanks!!!

[aralroca]

I abstracted the app dir logic into next-load library, if somebody wants to load different things than translations in an easy way 😊 If you try please give some feedback 🙏

The idea is to use next-load package to support also layout, template, loading, etc. Next-load is still in 0.x and is a good way to try and find the best solution + support to integrate next-load in libraries as next-translate before next-load 1.0

Bye the way, I close the issue, already fixed by @marcelotk15 . Thanks

[fernandojbf]

I believe the 404 in non default languages returned again after 13.4.0.

I didn't had time to investigate further, but it seems that now the problem is not in the middleware. The middleware seems to be working well, removing locale from the href and path and adding it as searchParam. But the the route don't match.

If you add a new [lang]/page.tsx it works. The problem should be in the routing itself.

After a quick investigation:

It seems that can be related with next.config.js i18n and rewrites at the same time.

I've used a clean project without any i18n or next-translate configuration, using the documented way of i18n from Nexjs.

I want to make sure any /en/ is / instead. Using a simple middleware that make any / to be rewrited to /en, the routing system works. But in the moment that I configure i18n configurations in next.config.js (without any next-translate), the middleware rewrite stops working.

I will try to investigate further tonight

[lynn1286]

Hey bro, I'm using the latest version of nextjs, and found that next-translate doesn't work anymore, and 404 appears when I click to access . codesandbox address ： https://codesandbox.io/p/sandbox/next-translate-app-dir-forked-vp5r4n?file=%2Fpackage.json&selection=%5B%7B%22endColumn%22%3A20%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A11%2C%22startLineNumber%22%3A13%7D%5D

[aralroca]

@fernandojbf @lynn1286 , the PR solving this is already implemented for @alvesvin, probably should be fixed in the next release