use server.ts

longlho · longlho · commit 386a51a46d0c · 2020-08-24T20:51:43.000-04:00
diff --git a/examples/with-react-intl/package.json b/examples/with-react-intl/package.json
@@ -2,11 +2,11 @@
   "name": "with-react-intl",
   "version": "1.0.0",
   "scripts": {
-    "dev": "NODE_ICU_DATA=node_modules/full-icu next dev",
-    "build": "next build && npm run extract:i18n && npm run compile:i18n",
+    "dev": "NODE_ICU_DATA=node_modules/full-icu ts-node --project tsconfig.server.json server.ts",
+    "build": "next build && tsc -p tsconfig.server.json && npm run extract:i18n && npm run compile:i18n",
     "extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --out-file lang/en.json",
     "compile:i18n": "formatjs compile-folder --ast --format simple lang/ compiled-lang/",
-    "start": "NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu next start"
+    "start": "NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu node dist/server"
   },
   "dependencies": {
     "@formatjs/cli": "^2.7.3",
@@ -29,6 +29,7 @@
     "@types/accepts": "^1.3.5",
     "cross-spawn": "7.0.3",
     "prettier": "2.0.5",
+    "ts-node": "8.0.0",
     "typescript": "3.9.7"
   },
   "prettier": {
diff --git a/examples/with-react-intl/pages/_app.tsx b/examples/with-react-intl/pages/_app.tsx
@@ -11,14 +11,27 @@ function MyApp({Component, pageProps, locale, messages}) {
   );
 }
 
+// We need to load and expose the translations on the request for the user's
+// locale. These will only be used in production, in dev the `defaultMessage` in
+// each message description in the source code will be used.
+const getMessages = (locale: string = 'en') => {
+  switch (locale) {
+    default:
+      return import('../compiled-lang/en.json');
+    case 'fr':
+      return import('../compiled-lang/fr.json');
+  }
+};
+
 const getInitialProps: typeof App.getInitialProps = async appContext => {
   const {
     ctx: {req},
   } = appContext;
   const locale = (req as any)?.locale ?? 'en';
-  const messages = (req as any)?.messages ?? {};
-  const [appProps] = await Promise.all([
+
+  const [appProps, messages] = await Promise.all([
     polyfill(locale),
+    getMessages(locale),
     App.getInitialProps(appContext),
   ]);
 
diff --git a/examples/with-react-intl/server.ts b/examples/with-react-intl/server.ts
@@ -16,19 +16,12 @@ const dev = process.env.NODE_ENV !== 'production';
 const app = next({dev});
 const handle = app.getRequestHandler();
 
-// We need to load and expose the translations on the request for the user's
-// locale. These will only be used in production, in dev the `defaultMessage` in
-// each message description in the source code will be used.
-const getMessages = (locale: string = 'en') => {
-  return require(`./compiled-lang/${locale}.json`);
-};
-
 Promise.all([app.prepare(), ...SUPPORTED_LOCALES.map(polyfill)]).then(() => {
   createServer((req, res) => {
     const accept = accepts(req);
     const locale = accept.language(supportedLanguages) || 'en';
     (req as any).locale = locale;
-    (req as any).messages = dev ? {} : getMessages(locale);
+
     handle(req, res);
   }).listen(port, () => {
     console.log(`> Ready on http://localhost:${port}`);
diff --git a/examples/with-react-intl/tsconfig.server.json b/examples/with-react-intl/tsconfig.server.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "CommonJS",
+    "noEmit": false
+  }
+}
