docs(examples): update examples

[timofei-iatsenko]

Description

• nextjs-babel - updated, issues with SSR fixed, best practices implemented
• nextjs-swc - created, it's diffrent than in SWC repo and differs from nextjs-babel just to show more concepts
• js - deps updated
• create-react-app - updated, fixed incompatibilities with react-scripts@v5

#1393

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
js-lingui	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 22, 2023 at 4:33PM (UTC)

[github-actions]

size-limit report 📦

Path	Size
./packages/core/build/esm/index.js	1.61 KB (0%)
./packages/detect-locale/build/esm/index.js	812 B (0%)
./packages/react/build/esm/index.js	1.59 KB (0%)
./packages/remote-loader/build/esm/index.js	7.25 KB (0%)

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (2cb5175) 75.34% compared to head (bdb4741) 75.34%.

Additional details and impacted files

@@           Coverage Diff           @@
##             next    #1550   +/-   ##
=======================================
  Coverage   75.34%   75.34%           
=======================================
  Files          78       78           
  Lines        1971     1971           
  Branches      516      516           
=======================================
  Hits         1485     1485           
  Misses        375      375           
  Partials      111      111           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[gpessa]

The solution is not working, we keep using the useEffect to activate the language. The problem with that is that useEffect is called only client side so in server side the page is rendered with the default language and not the right one

[tanwarvinay]

Is there any workaround to this ? Translations are not added to HTML on server. They are being added on Client Side.

[timofei-iatsenko]

@tanwarvinay check the latest examples in the repository carefully, it's working perfectly with SSR

[tanwarvinay]

@thekip Thank you for the quick response. On my localhost i actually get translations on SSR but when i deploy my code on staging server than the poblem occurs.
I am also getting consistently following warning on my localhost -->

I18nProvider rendered null. A call to i18n.activate needs to happen in order for translations to be activated and for the I18nProvider to render.This is not an error but an informational message logged only in development.

My Implementation Example

./I18nProviderWrapper.js. // used in _app.js

import { useSelector } from 'react-redux';
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';

import {
  loadLocales,
} from '~/i18n/utils/loadLocales';

const I18nProviderWrapper = ({ children }) => {
  const locale = useSelector((state) => state.globalData.locale);
  loadLocales(locale);
  return (
    <I18nProvider i18n={i18n} >
      {children}
    </I18nProvider>
  );
};

export default I18nProviderWrapper;

./loadlocales.js
import { i18n } from '@lingui/core';

export const loadLocales = async (locale) => {
  const { messages } = await import(
    `~/i18n/translations/${locale || 'en'}/messages.js`
  );
  i18n.load(locale, messages);
  i18n.activate(locale);
};

./html.js
import { Trans } from '@lingui/macro';
const Test = () => {
  return <Trans>Hello World </Trans>
}

The Above Code Works perfectly on my localhost (on build also) but gives the above stated warning. But does not work when staging server is used.

[andrii-bodnar]

@tanwarvinay please make sure that the Lingui core, react, and macro packages are located in the dependencies and not in devDependencies

[timofei-iatsenko]

@tanwarvinay please use examples provided in this repo. Your integration is wrong. loadLocales in your case is async and not awaited anyhow in the react components, this is the root of your issue. The examples in the repo have full solution which battle tested on production on many websites.

[tanwarvinay]

@andrii-bodnar and @thekip you are a life saver. Thank you so much.