1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples
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
..
active-class-name #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
basic-css #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
basic-export #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-charset #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-actionhero #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-express #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-fastify improve custom-server-fastify example (#4805) 2018-07-19 21:27:22 +02:00
custom-server-hapi #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-koa #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-micro #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-nodemon #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-polka #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
custom-server-typescript Fix custom-server-typescript not typechecking (#3954) 2018-09-04 17:35:34 +02:00
data-fetch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
form-handler #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
gh-pages #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
head-elements #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
hello-world #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
layout-component #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
nested-components #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
only-client-render-external-dependencies update client-only-render-external-dependency example (#4822) 2018-07-22 20:53:22 +02:00
page-transitions Remove page-transitions example 2018-05-25 14:19:40 +02:00
parameterized-routing #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
pass-server-data #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
progressive-render #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
root-static-files Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
shared-modules #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
ssr-caching #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
svg-components #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-inferno #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-nerv #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-preact #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-router #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
using-with-router #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-absolute-imports #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-algolia-react-instantsearch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-amp #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-ant-design Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-ant-design-less Fix for with-ant-design-less for next7.0 (#5263) 2018-09-24 00:03:38 +02:00
with-antd-mobile #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-aphrodite #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-apollo example with-apollo note that two render executions are expected (#5262) 2018-09-23 21:05:00 +02:00
with-apollo-and-redux Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-apollo-and-redux-saga Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-apollo-auth Merge branch 'canary' 2018-09-19 18:15:57 +02:00
with-app-layout #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-asset-imports update with-asset-import example (#4830) 2018-07-24 19:11:21 +02:00
with-babel-macros #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-carbon-components Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-cerebral #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-componentdidcatch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-configured-preset-env Upgrade Babel to 7.0.0-rc.1 (major) (#4937) 2018-08-13 10:34:08 -07:00
with-context-api Add with-context-api example (#5154) 2018-09-14 12:04:29 +02:00
with-custom-babel-config Upgrade Babel to 7.0.0-rc.1 (major) (#4937) 2018-08-13 10:34:08 -07:00
with-custom-reverse-proxy Fix with-custom-reverse-proxy example (#5064) 2018-08-30 23:32:19 +02:00
with-cxs #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-data-prefetch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-docker #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-dotenv Rewrite with-dotenv example (#4924) 2018-08-08 09:01:00 -07:00
with-draft-js #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-dynamic-import Update with-dynamic-import example (#5201) 2018-09-23 16:01:54 +02:00
with-electron #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-emotion #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-emotion-fiber #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-external-scoped-css Deprecate css examples 2018-01-31 11:19:34 +01:00
with-fela #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-firebase-authentication #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-firebase-hosting Upgrade Babel to 7.0.0-rc.1 (major) (#4937) 2018-08-13 10:34:08 -07:00
with-firebase-hosting-and-typescript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-flow Remove unused flow definitions (#5094) 2018-09-05 13:38:28 +02:00
with-freactal #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-glamor Improve glamor example (#4893) 2018-08-05 16:13:28 -07:00
with-glamorous #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-global-stylesheet Remove with-global-stylesheet example (#4913) 2018-08-07 18:36:28 -07:00
with-global-stylesheet-simple Remove with-global-stylesheet example (#4913) 2018-08-07 18:36:28 -07:00
with-google-analytics Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-hashed-statics Merge branch 'canary' 2018-09-19 18:15:57 +02:00
with-higher-order-component Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-i18next #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-immutable-redux-wrapper #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-ioc Replace deprecated props.url in examples (#4953) 2018-08-13 14:12:03 -07:00
with-jest Upgrade with-jest dependencies (#5149) 2018-09-12 15:29:17 +02:00
with-jest-typescript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-kea Update with-kea example (#5259) 2018-09-23 16:01:37 +02:00
with-loading Update routing samples (#4864) 2018-08-13 14:17:39 -07:00
with-markdown update with-markdown example (#4839) 2018-07-25 20:06:40 +02:00
with-material-ui docs: removes npx info & moves src link up (#4972) 2018-08-19 22:26:50 +02:00
with-mobx Update with-mobx example (#5229) 2018-09-20 14:29:57 +02:00
with-mobx-state-tree Fix with-mobx-state-tree example (#5258) 2018-09-22 22:21:54 +02:00
with-mobx-state-tree-typescript Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-mocha add mocha example (#5182) 2018-09-17 00:12:39 +02:00
with-next-css Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-next-less Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-next-page-transitions #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-next-routes Replace deprecated props.url in examples (#4953) 2018-08-13 14:12:03 -07:00
with-next-sass Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-noscript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-now-env #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-pkg #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-polyfills #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-portals #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-prefetching update with-prefetching example (#4850) 2018-07-27 22:08:09 +02:00
with-pretty-url-routing #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-ga update with-react-ga example (#4816) 2018-07-21 19:27:48 +02:00
with-react-helmet #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-i18next #5620: Fix react-i18next example to properly SSR (#5265) 2018-09-24 12:13:38 +02:00
with-react-intl Fix react-intl example (#4840) 2018-09-02 23:53:43 +02:00
with-react-jss Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-react-md #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-native-web [change] Update RNW example (#4787) 2018-07-15 20:59:20 +02:00
with-react-toolbox #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-uwp #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-react-with-styles #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-reasonml example with-reasonml dependency updates (#5048) 2018-09-03 01:38:54 +02:00
with-rebass #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-recompose #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-redux Lint examples (#4985) 2018-08-20 08:31:24 +02:00
with-redux-code-splitting Fix failing linter tests (#5257) 2018-09-22 21:41:07 +02:00
with-redux-observable Fixed server status message in with-redux-observable-example. (#4900) 2018-08-05 10:56:04 -07:00
with-redux-reselect-recompose Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-redux-saga FIX #5234 (#5235) 2018-09-20 21:09:29 +02:00
with-redux-wrapper #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-reflux #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-refnux #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-relay-modern Fixed package.json (#4654) 2018-09-04 17:50:44 +02:00
with-rematch #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-scoped-stylesheets-and-postcss Deprecate css examples 2018-01-31 11:19:34 +01:00
with-segment-analytics #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-semantic-ui Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-sentry example with-sentry note that server side logging available too (#5261) 2018-09-23 21:06:05 +02:00
with-shallow-routing Fix shallow routing examples using old React lifecycle and deprecated props.url (#4950) 2018-08-13 11:09:45 -07:00
with-sitemap-and-robots-express-server Update example: with-sitemap-and-robots-express-server (#4579) 2018-09-04 17:18:05 +02:00
with-sitemap-and-robots-express-server-typescript Add with-sitemap-and-robots-express-server-typescript example (#5076) 2018-09-03 16:43:19 +02:00
with-slate Add slate.js example (#4899) 2018-08-06 21:00:31 -07:00
with-socket.io #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-static-export Upgrade serve (#4857) 2018-07-27 21:13:55 +02:00
with-storybook #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-strict-csp Add with-strict-csp example (#4858) 2018-08-06 20:19:16 -07:00
with-strict-csp-hash Factor out NextScript inline source (#4934) (#4939) 2018-08-14 11:05:25 -07:00
with-styled-components Update .babelrc (#5063) 2018-08-30 23:33:08 +02:00
with-styled-jsx-plugins #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-styled-jsx-postcss Make styled-jsx configurable (#3050) 2017-10-15 19:54:57 +02:00
with-styled-jsx-scss #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-styletron #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-sw-precache Missing babel configuration in sw-precache example (#4856) 2018-07-27 22:54:01 +02:00
with-tailwindcss #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-typescript #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-typestyle Added example: with-typestyle (#4926) 2018-08-08 21:36:34 -07:00
with-universal-configuration #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-universal-configuration-runtime Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
with-unstated #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-url-object-routing #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-videojs Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
with-webassembly doc: fix deploy link (#5223) 2018-09-20 11:30:23 +02:00
with-webpack-bundle-analyzer Update next.config in with-webpack-bundle-analyzer example to avoid issue with Next.js in CI (#5135) 2018-09-10 12:00:45 +02:00
with-webpack-bundle-size-analyzer #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
with-yarn-workspaces Add with-yarn-workspaces example (#5034) 2018-09-03 23:41:45 +02:00
with-zones #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00
.babelrc Add componentDidCatch example 2018-04-23 14:22:36 -07:00
.gitignore Remove yarn.lock from examples (#912) 2017-01-29 05:48:53 +05:30