next-translate: homepage 404 error, when using nextjs13.4 version

What version of this package are you using?

  "dependencies": {
    "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.10",
    "next": "13.4.10",
    "next-translate": "^2.5.0",
    "postcss": "8.4.26",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "next-translate-plugin": "^2.5.0"
  }

What operating system, Node.js, and npm version? npm : 8.5.1 nodejs: v18.16.0

What happened?

After using npx create-next-app@latest to create a project and only adding the next-translate library, the home page cannot be accessed and a 404 error is displayed.

Whether it is /ja /en /zh or / cannot be accessed, a 404 error is displayed

What did you expect to happen?

I hope the normal home page can be displayed

Are you willing to submit a pull request to fix this bug?

I don’t think I can do it

with i18n.js and next.config.js

i18n.js


module.exports = {
    locales: ["en", "zh", "ja"],
    defaultLocale: "en",
    pages: {
        "*": ["common"],
    },
    loadLocaleFrom: (lang, ns) =>
        import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
};

next.config.js

const nextConfig = {
    experimental: {
        appDir: true,
    },
};
const nextTranslate = require("next-translate-plugin");

module.exports = nextTranslate(nextConfig);

whatever i add experimental.appDir or remove it still get 404 error

and with the nextjs config

✔ What is your project named? … testapp
✔ Would you like to use TypeScript? … No / **Yes**
✔ Would you like to use ESLint? … No / **Yes**
✔ Would you like to use Tailwind CSS? … No / **Yes**
✔ Would you like to use `src/` directory? … No / Yes //i tried both of this still get 404
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to customize the default import alias? … **No** / Yes

About this issue

Original URL
State: open
Created a year ago
Reactions: 2
Comments: 24 (4 by maintainers)

Most upvoted comments

We are investigating a better way to fix that, because now i18n has some trobles with the middleware (issue https://github.com/vercel/next.js/issues/49883), but for now can be solved adding a app/route.(js|ts) file:

import { NextRequest } from 'next/server';
import { redirect } from 'next/navigation';
import i18nConfig from '../../i18n';

export async function GET(request: NextRequest) {
  const userPreferredLanguage =
    request.headers.get('accept-language')?.split(',')?.[0] ??
    i18nConfig.defaultLocale;

  const lang = i18nConfig.locales.includes(userPreferredLanguage)
    ? userPreferredLanguage
    : i18nConfig.defaultLocale;

  return redirect(`/${lang}${request.nextUrl.pathname.toLowerCase()}`);
}


src/app
 ├── [lang]
 │   │── layout.tsx
 │   ├── loading.tsx
 │   ├── page.tsx
 └── route.ts

aralroca on Jul 25, 2023

Same problem here. Is it a nextjs bug? Know anybody when it will be fixed?

b-vetter on Aug 29, 2023

Same here. Latest example only works if I am already in e.g. localhost:3000/en/news. If I go to localhost:3000 it will throw 404.

darr1s on Jul 18, 2023

I have the same problem using the regular Next Pages, any way to solve it? Doesn’t happen on localhost, but it does on Vercel, if I click on any link on the page doesn’t happen and only occurs on the home page.

next 13.4.4 next-translate 2.4.4 next-translate-plugin 2.4.4

I think only happens when accept-language is not comming. By default we are adding the i18n in the next.config.js config and is doing this redirect to the prefered language of the user. However when the user doesn’t have a preferred language or accept-language header is not comming, then is displaying this 404. In order to solve it is better for now to implement the solution I proposed above.

aralroca on Jul 28, 2023