Googlebot doesn't receieve translations

yonirosenbaum commented 3 months ago

Description

🐛 Bug Report

Messages are crawled by google before the relevant text has been injected ie below 'quiz.general.whatWeDo' should equal 'What do we do'

I am using i18n routing and have followed the docs: https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing.

Here is the below page that is being affected, note the html is being stripped out and is just appearing as empty space.

app/[locale]/what-we-do/page.tsx

` 'use client'; import styled from '@emotion/styled'; import { Typography, Button } from '@mui/material'; import { useRouter } from 'next/navigation'; import Image from 'next/image'; import { css } from '@emotion/react'; import Alert, { AlertPosition, AlertColor } from 'src/components/DataDisplay/Alert'; import { MIN_WIDTH } from 'src/utils/constant'; import { routes } from 'src/utils/routes'; import { useTranslations } from 'next-intl'; import { useEffect } from 'react';

const WhatWeDo = () => { const t = useTranslations('quiz.general'); return (

{t('whatWeDo')} {t('dreamPhotoshoot')}

); };

export default WhatWeDo; ` Here are some other pages which impact the i18n setup

/app/[locale]/layout

`

const locales = ['en', 'es'];

export function generateStaticParams() { return locales.map((locale) => ({ locale })); }

type RootLayoutProps = PropsWithChildren & ParamsType;

const RootLayout = async ({ children, params }: RootLayoutProps) => { const messages = await getMessages(); return ( <html lang={params.locale || 'en'}>

{children}

</html>

); }; `

src/i18n.ts

` import {notFound} from 'next/navigation'; import {getRequestConfig} from 'next-intl/server';

// Can be imported from a shared config const locales = ['en', 'es'];

export default getRequestConfig(async ({locale}) => { // Validate that the incoming locale parameter is valid if (!locales.includes(locale as any)) notFound();

return { messages: (await import(../messages/${locale}.json)).default }; }); `

src/middleware.ts

` import createMiddleware from 'next-intl/middleware';

export default createMiddleware({ // A list of all locales that are supported locales: ['en', 'es'],

// Used when no locale matches defaultLocale: 'en' });

export const config = { // Match only internationalized pathnames matcher: ['/', '/(es|en)/:path*'] }; `

Your Environment

runtime version: i.e. node v20
i18next version: i.e. 3.15.2
os: Mac

Verifications

[X] I've verified that the problem I'm experiencing isn't covered in the docs.
[X] I've searched for similar, existing issues on GitHub and Stack Overflow.
[X] I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://www.google.com/search?q=boostdating.com&sca_esv=bb6fb22019ea88f6&ei=2vaDZt7nLdHn2roPw76IsAc&ved=0ahUKEwjevM3rsYiHAxXRs1YBHUMfAnYQ4dUDCA8&uact=5&oq=boostdating.com&gs_lp=Egxnd3Mtd2l6LXNlcnAiD2Jvb3N0ZGF0aW5nLmNvbUjUBFDYAljYAnABeACQAQCYAegBoAHoAaoBAzItMbgBA8gBAPgBAZgCAKACAJgDAIgGAZIHAKAHqgE&sclient=gws-wiz-serp

Reproduction description

Visit to see: https://www.google.com/search?q=boostdating.com&sca_esv=bb6fb22019ea88f6&ei=2vaDZt7nLdHn2roPw76IsAc&ved=0ahUKEwjevM3rsYiHAxXRs1YBHUMfAnYQ4dUDCA8&uact=5&oq=boostdating.com&gs_lp=Egxnd3Mtd2l6LXNlcnAiD2Jvb3N0ZGF0aW5nLmNvbUjUBFDYAljYAnABeACQAQCYAegBoAHoAaoBAzItMbgBA8gBAPgBAZgCAKACAJgDAIgGAZIHAKAHqgE&sclient=gws-wiz-serp

Expected behaviour

Translations should be crawled by googlebot having already been translated rather than have the JS placeholder variables be pulled in.

amannn commented 3 months ago

It seems like Google has crawled your page at a time where you didn't have the translation set up yet (maybe only for certain languages) and that resulted in the placeholders being indexed. If you check the markup of your page, you can confirm that there are no placeholders.

yonirosenbaum commented 3 months ago

Thanks!!

amannn / next-intl