diff --git a/examples/with-react-intl/lang/en.json b/examples/with-react-intl/lang/en.json
index e6cd30bb2f93..64e7e19221b3 100644
--- 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
index 10c7641a614e..27abeef6365d 100644
--- 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
index 4aa47f941d7f..2e41e4fcaa29 100644
--- 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
index fcdd1a8ec1aa..4f184ca0ee46 100644
--- 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
new file mode 100644
index 000000000000..0eda159f2141
--- /dev/null
+++ 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 {
+ 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 (
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default MyDocument;
diff --git a/examples/with-react-intl/server.ts b/examples/with-react-intl/server.ts
index ece3cacc2532..bef578861f6c 100644
--- 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}`);