Готовить ie со статусом c Далее JS экспорт возврат к исходному значению при обновлении страницы - PullRequest
Новая
       9

Готовить ie со статусом c Далее JS экспорт возврат к исходному значению при обновлении страницы

0 голосов
/ 10 апреля 2020

Я создаю веб-сайт, который имеет два языка, поэтому я сохраняю выбранный язык при приготовлении ie и извлекаю его в getInitialProps в файле _app, а затем передаю в качестве значения API контекста. и я держу повара ie с syn c в состоянии языка через useEffect. _app. js файл выглядит следующим образом. 

import React, { useState, useEffect } from 'react';
import nextCookie from 'next-cookies';
import * as Cookie from 'js-cookie';
import Head from 'next/head';
import { ThemeProvider } from 'emotion-theming';

import Layout from '../components/Common/Layout';
import GlobalStyle from '../components/GlobalStyle';
import { languageState, languageDispatch } from '../hooks/useLanguage';

function MyApp({ Component, pageProps, initialLanguage = 'ar' }) { 
    const [language, setLanguage] = useState(initialLanguage); 
    const changeLanuage = () => {
      setLanguage((prev) => (prev == 'en' ? 'ar' : 'en'));
    };

    useEffect(() => { 
      Cookie.set('language', language); 
    }, [language]);

    return (
    <languageDispatch.Provider value={changeLanuage}>
      <languageState.Provider value={language}>
        <ThemeProvider theme={theme}>
          <Layout>
            <Head>
              <link rel="shortcut icon" href="/svg/favicon.ico" />
            </Head>
            <Component {...pageProps} />
            <GlobalStyle rtl={rtl} />
          </Layout>
        </ThemeProvider>
      </languageState.Provider>
    </languageDispatch.Provider>
  );
} 
MyApp.getInitialProps = async ({ ctx }) => {
    const { language } = cookies(ctx); 
    return { initialLanguage: language }; 
};

в режиме разработки и при развертывании сейчас он отлично работает с каждой страницей refre sh. Однако, когда я экспортирую его как stati c и разверну на Netlify, при каждом refre sh язык возвращается к своему начальному значению ("ar").

Есть ли лучший способ реализовать это если нет, что не так с приведенной выше реализацией?

1 Ответ

0 голосов
/ 12 апреля 2020

После некоторых исследований я выяснил, что при статическом экспорте проекта Next JS при использовании getInitialProps или getStaticProps Next JS создаст страницы c HTML с начальными значениями - в этом case, "ar" - поэтому, когда вы обновляете sh страницу, содержимое будет приходить с его начальными значениями, поэтому в моем предыдущем подходе я менял cook ie только во время выполнения. Однако во время сборки это было начальное значение "ar".

- вот фрагмент кода out / index. html 

<script id="__NEXT_DATA__" type="application/json">
  {
    "props": { "initialLanguage": "ar" },
    "page": "/",
    "query": {},
    "buildId": "RmU4iA8jACDFdZr30Xqjo",
    "nextExport": true,
    "isFallback": false
  }
</script>

, поэтому я знал некоторый подход чтобы решить эту проблему, а именно,

  1. загрузить Next JS как SSR, а не SSG.

  2. дубликаты страниц для каждого языка, например, "/ en", "/ ar".

  3. сохраните начальное значение в localStorage и используйте useEffect, измените его, но вам нужно обработать состояние загрузки при рендеринге компонента и прочитать localStorage.

  4. использовать сторонний пакет.

Итак, подход, который я использовал, заключался в создании двух страниц для каждого языка.

, чтобы структура папок стала примерно такой. 

pages
 --[lang]
   --index.js
   --other.js
--index.js

и вот страницы / указатель. js

import Home from '../components/Home';
import Head from '../components/Common/Head';
import { useRouter } from 'next/router';
import getInitialLocale from '../locale/getInitialLocale';
import Spinner from '../components/Common/Spinner/Spinner';

const Index = () => {
  const router = useRouter();
  React.useEffect(() => {
    const href = `/${getInitialLocale()}`;
    router.push({ pathname: href });
  }, []);

  return (
    <div>
      <Head title="Home" />
      <h1 style={{ fontSize: '3rem' }}>Welcome to Here</h1>
    </div>
  );
};

export default Index;

Если я сделал что-то не так или у вас есть предложения лучше, прокомментируйте здесь, пожалуйста?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...