1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Commit graph

15 commits

Author SHA1 Message Date
Zack Tanner 9854c342e1 #5620: Fix react-i18next example to properly SSR (#5265)
This fixes https://github.com/zeit/next.js/issues/5260 by making sure that `index.js` has `getInitialProps` defined on the page exported component, not the child component.

When fixing that, I uncovered an issue where the server side rendered HTML did not match the clientside HTML, so I reworked _app.js to use the `i18nextprovider` component which has props to hydrate the initial data (for SSR), and makes sure the correct i18n instance is passed to all child components through context.

Before:
```html
<!DOCTYPE html>
<html>
   <head>
      <meta charSet="utf-8" class="next-head"/>
      <link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
   </head>
   <body>
      <div id="__next"></div>
      <script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
   </body>
</html>
```

After: 
```html
<!DOCTYPE html>
<html>
   <head>
      <meta charSet="utf-8" class="next-head"/>
      <link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
   </head>
   <body>
      <div id="__next">
         <h1>This example integrates react-i18next for simple internationalization.</h1>
         <div>
            <h1>welcome to next.js</h1>
            <p>This example integrates react-i18next for simple internationalization.</p>
            <p>test words for en</p>
            <div><button>fire in the wind for en</button></div>
            <p>You can either pass t function to child components.</p>
            <p>Or wrap your component using the translate hoc provided by react-i18next.</p>
            <p>Alternatively, you can use <code>Trans</code> component.</p>
            <a href="/page2">Go to page 2</a><br/><a href="/page3">Go to page 3 (no hoc)</a>
         </div>
      </div>
      <script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{"i18n":null,"initialI18nStore":{"en":{"home":{"welcome":"welcome to next.js","sample_test":"test words for en","sample_button":"fire in the wind for en","link":{"gotoPage2":"Go to page 2","gotoPage3":"Go to page 3 (no hoc)"}},"common":{"integrates_react-i18next":"This example integrates react-i18next for simple internationalization.","pureComponent":"You can either pass t function to child components.","extendedComponent":"Or wrap your component using the translate hoc provided by react-i18next.","transComponent":"Alternatively, you can use \u003c1\u003eTrans\u003c/1\u003e component."}}},"initialLanguage":"en-US"}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
   </body>
</html>
```
2018-09-24 12:13:38 +02:00
Jan Mühlemann e11d08ae45 Update with react 18next to latest (#5017)
* update with-react-i18next supporting new _app.js

* update readme to not encourage cloning of repo
2018-08-24 09:49:10 +02:00
HaNdTriX 5ff7c0742c Lint examples (#4985)
* Lint examples/with-apollo-and-redux-saga

* Lint examples/with-apollo-auth

* Lint examples/with-apollo

* Lint exampels/with-google-analytics

* Lint examples/with-higher-order-component

* Lint examples/with-react-i18next

* Lint exampels/with-redux

* Lint exampels/with-relay-modern

* Lint examples/with-universal-configuration-runtime

* Add **/examples/**/lib/** to linter
2018-08-20 08:31:24 +02:00
Michael Herold 5b3578e58f #4751 - Explicitly mention install when cloning examples (#4758)
Preferably this installation wouldn't be necessary, but in lieu of a fix...

#4751
2018-07-11 23:56:15 +02:00
Andrew Razumovsky 0d4d7d840a [with-react-i18next] Fix flickering on page change via <Link /> (#4318)
* Fix flickering on page change via <Link />

* Remove process.browser check
2018-05-09 15:06:37 +02:00
James Hegedus f2e56609cd Examples: stabalise README format and create-next-app usage (#4009)
* Examples: clarify language around Yarn create & npx

* add missing READMEs and create-next-app usage

* suggest people tag jthegedus in firebase related issues

* add yarn alt instructions

* cerebraljs example readme & fixes
2018-04-03 14:19:05 +02:00
Alexander Kachkaev d5ce7aa3ca Update debug flag in with-react-i18next example (#3964)
Do not set it to true in production
2018-03-07 09:31:03 +01:00
Alexander Kachkaev 8bd81f6a68 Split exports in with-react-18next example to avoid ambiguity (#3959)
See context in https://github.com/i18next/react-i18next/issues/397
2018-03-07 08:42:14 +01:00
Alexander Kachkaev a225da4bb1 Fix null pointer exception in with-react-18next (#3944)
The example does not crash if a user chooses a non-existing language (e.g. goes to localhost:3000/?lng=ru)
2018-03-06 10:39:35 +01:00
Alexander Kachkaev dbb1b732a0 Update with-react-i18next example (#3932)
- simplify pages by introducing withI18next hoc
- add Trans component example
- replace <div> with <p> in demo components to make text on pages easier to read

German translation by @marinaroot
2018-03-05 12:46:13 +01:00
Jan Mühlemann 7a937505f5 update with-react-i18next sample with latest dependencies (#3835) 2018-02-18 12:41:40 +01:00
Tim Neutkens 9a82ca4029 Update Next.js version on examples 2018-01-30 21:46:15 +01:00
Brikou CARRE ba65b07dff Ease running multiple examples at the same time with process.env.PORT (#2753) 2017-08-10 20:15:46 +02:00
SangWon Kim 37362c3e98 Fix typo (#2692) 2017-08-01 07:29:52 +05:30
Jan Mühlemann e7d91bf692 adds with react-i18next example (#2558)
* adds with react-i18next example

* lint example code

* remove unneeded .babelrc
2017-07-16 22:19:45 +02:00