fix: fix hashing algo and locale value hydration (#16692)

- Fix hashing algo for extraction so it's the same as babel config - Fix locale persistence issue fix #16689
vercel · Sep 1, 2020 · 6f60a22 · 6f60a22
1 parent f1c4cb8
commit 6f60a22
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 13 deletions.
diff --git a/examples/with-react-intl/lang/en.json b/examples/with-react-intl/lang/en.json
@@ -1,7 +1,7 @@
 {
-  "11754": "An example app integrating React Intl with Next.js",
-  "65a8e": "Hello, World!",
-  "8cf04": "Home",
-  "8f7f4": "About",
-  "9c817": "React Intl Next.js Example"
+  "AvQcw8": "React Intl Next.js Example",
+  "N015Sp": "Hello, World!",
+  "ejEGdx": "Home",
+  "fnfXnF": "An example app integrating React Intl with Next.js",
+  "g5pX+a": "About"
 }
diff --git a/examples/with-react-intl/lang/fr.json b/examples/with-react-intl/lang/fr.json
@@ -1,7 +1,7 @@
 {
-  "11754": "Un exemple d'application intégrant React Intl avec Next.js",
-  "65a8e": "Bonjour le monde!",
-  "8cf04": "Accueil",
-  "8f7f4": "À propos de nous",
-  "9c817": "React Intl Next.js Exemple"
+  "AvQcw8": "Un exemple d'application intégrant React Intl avec Next.js",
+  "N015Sp": "Bonjour le monde!",
+  "ejEGdx": "Accueil",
+  "fnfXnF": "À propos de nous",
+  "g5pX+a": "React Intl Next.js Exemple"
 }
diff --git a/examples/with-react-intl/package.json b/examples/with-react-intl/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "cross-env NODE_ICU_DATA=node_modules/full-icu ts-node --project tsconfig.server.json server.ts",
     "build": "npm run extract:i18n && npm run compile:i18n && next build && tsc -p tsconfig.server.json",
-    "extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --out-file lang/en.json",
+    "extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/en.json",
     "compile:i18n": "formatjs compile-folder --ast --format simple lang/ compiled-lang/",
     "start": "cross-env NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu node dist/server"
   },

diff --git a/examples/with-react-intl/pages/_app.tsx b/examples/with-react-intl/pages/_app.tsx
@@ -27,7 +27,7 @@ const getInitialProps: typeof App.getInitialProps = async appContext => {
   const {
     ctx: {req},
   } = appContext;
-  const locale = (req as any)?.locale ?? 'en';
+  const locale = (req as any)?.locale || (window as any).LOCALE || 'en';
 
   const [appProps, messages] = await Promise.all([
     polyfill(locale),

diff --git a/examples/with-react-intl/pages/_document.tsx b/examples/with-react-intl/pages/_document.tsx
@@ -0,0 +1,46 @@
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from 'next/document';
+
+interface Props {
+  locale: string;
+  lang: string;
+  nonce: string;
+}
+
+class MyDocument extends Document<Props> {
+  static async getInitialProps(ctx: DocumentContext) {
+    const {req} = ctx;
+    const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      locale: (req as any).locale || 'en',
+      lang: ((req as any).locale || 'en').split('-')[0],
+      nonce: (req as any).nonce,
+    };
+  }
+
+  render() {
+    return (
+      <Html lang={this.props.lang}>
+        <Head />
+        <body>
+          <script
+            nonce={this.props.nonce}
+            dangerouslySetInnerHTML={{
+              __html: `window.LOCALE="${this.props.locale}"`,
+            }}
+          ></script>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/examples/with-react-intl/server.ts b/examples/with-react-intl/server.ts
@@ -4,6 +4,7 @@ import {createServer} from 'http';
 import accepts from 'accepts';
 import next from 'next';
 import {polyfill} from './polyfills';
+import crypto from 'crypto';
 // Get the supported languages by looking for translations in the `lang/` dir.
 const supportedLanguages = globSync('./compiled-lang/*.json').map(f =>
   basename(f, '.json')
@@ -21,7 +22,10 @@ Promise.all([app.prepare(), ...SUPPORTED_LOCALES.map(polyfill)]).then(() => {
     const accept = accepts(req);
     const locale = accept.language(supportedLanguages) || 'en';
     (req as any).locale = locale;
-
+    const nonce = crypto.randomBytes(20).toString('hex');
+    (req as any).nonce = nonce;
+    // TODO: This will blow up other next inline JS but next.js should prob fix this
+    // res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}'`);
     handle(req, res);
   }).listen(port, () => {
     console.log(`> Ready on http://localhost:${port}`);