Support for i18n in Next 10

lib/helpers/getDefaultLocaleRedirectForI18n.js

@@ -0,0 +1,29 @@
+const i18n = require("./getI18n")();
+const { defaultLocale } = i18n;
+
+// In i18n projects, we need to create redirects from the "naked" route
+// to the defaultLocale-prepended route i.e. /static -> /en/static
+// Note: there can only one defaultLocale, but we put it in an array to simplify
+// logic in redirects.js files via concatenation
+const getDefaultLocaleRedirectForI18n = (route, srcRoute, target) => {
+  // If no i18n, skip
+  if (!defaultLocale) return [];
+
+  const routePieces = route.split("/");
+  const routeLocale = routePieces[1];
+  if (routeLocale === defaultLocale) {
+    const nakedRoute =
+      route === `/${routeLocale}` ? "/" : route.replace(`/${routeLocale}`, "");
+    // const nakedRoute = routePieces.slice(2, routePieces.length).join("/");
+    return [
+      {
+        route: nakedRoute,
+        target: target || route,
+      },
+    ];
+  }
+
+  return [];
+};
+
+module.exports = getDefaultLocaleRedirectForI18n;

lib/helpers/getI18n.js

@@ -0,0 +1,10 @@
+// Get the i1i8n details specified in next.config.js, if any
+const getNextConfig = require("./getNextConfig");
+
+const getI18n = () => {
+  const nextConfig = getNextConfig();
+
+  return nextConfig.i18n || { locales: [] };
+};
+
+module.exports = getI18n;

lib/helpers/getLocaleRoutesForI18n.js

@@ -0,0 +1,24 @@
+const i18n = require("./getI18n")();
+const getDataRouteForRoute = require("./getDataRouteForRoute");
+
+const getI18nDataRoute = (route, locale) => {
+  return route === "/"
+    ? getDataRouteForRoute(`/${locale}`)
+    : getDataRouteForRoute(route, locale);
+};
+
+// In i18n projects, Next does not prepend static routes with locales
+// so we have to do it manually
+const getLocaleRoutesForI18n = ({ route, srcRoute }) => {
+  // If no i18n or is dynamic route, skip
+  if (!i18n.defaultLocale || !!srcRoute) return [];
+  return i18n.locales.map((locale) => {
+    return {
+      route: `/${locale}${route}`,
+      dataRoute: getI18nDataRoute(route, locale),
+      nakedRoute: route,
+    };
+  });
+};
+
+module.exports = getLocaleRoutesForI18n;

lib/helpers/getPrerenderManifest.js

@@ -1,9 +1,46 @@
 const { join } = require("path");
 const { readJSONSync } = require("fs-extra");
 const { NEXT_DIST_DIR } = require("../config");
+const nextConfig = require("./getNextConfig")();
+const getDataRouteForRoute = require("./getDataRouteForRoute");
+
+const transformManifestForI18n = (manifest) => {
+  const { routes, dynamicRoutes } = manifest;
+  const { defaultLocale, locales } = nextConfig.i18n;
+  const newRoutes = {};
+  Object.entries(routes).forEach(
+    ([route, { dataRoute, initialRevalidateSeconds, srcRoute }]) => {
+      const isDynamicRoute = !!srcRoute;
+      if (isDynamicRoute) {
+        newRoutes[route] = routes[route];
+      } else {
+        locales.forEach((locale) => {
+          const routeWithPrependedLocale = `/${locale}${route}`;
+          newRoutes[routeWithPrependedLocale] = {
+            dataRoute: getDataRouteForRoute(route, locale),
+            srcRoute: route,
+            initialRevalidateSeconds: false,
+          };
+        });
+      }
+    }
+  );
+  const newDynamicRoutes = {};
+  Object.entries(dynamicRoutes).forEach(([route, { dataRoute, fallback }]) => {
+    newDynamicRoutes[route] = {
+      route,
+      dataRoute: getDataRouteForRoute(route, defaultLocale),
+      fallback,
+    };
+  });
+
+  return { ...manifest, routes: newRoutes, dynamicRoutes: newDynamicRoutes };
+};
 
 const getPrerenderManifest = () => {
-  return readJSONSync(join(NEXT_DIST_DIR, "prerender-manifest.json"));
+  const manifest = readJSONSync(join(NEXT_DIST_DIR, "prerender-manifest.json"));
+  if (nextConfig.i18n) return transformManifestForI18n(manifest);
+  return manifest;
 };
 
 module.exports = getPrerenderManifest;

lib/helpers/isRouteInPrerenderManifest.js

@@ -1,9 +1,21 @@
 const getPrerenderManifest = require("./getPrerenderManifest");
+const i18n = require("./getI18n")();
 
 const { routes, dynamicRoutes } = getPrerenderManifest();
+const { defaultLocale, locales } = i18n;
+
+const isRouteInManifestWithI18n = (route) => {
+  let isStaticRoute = false;
+  Object.entries(routes).forEach(([staticRoute, { srcRoute }]) => {
+    // This is because in i18n we set the nakedRoute to be the srcRoute in the manifest
+    if (route === srcRoute) isStaticRoute = true;
+  });
+  return isStaticRoute || route in dynamicRoutes;
+};
 
 // Return true if the route is defined in the prerender manifest
 const isRouteInPrerenderManifest = (route) => {
+  if (i18n.defaultLocale) return isRouteInManifestWithI18n(route);
   return route in routes || route in dynamicRoutes;
 };
 

lib/helpers/isRouteWithDataRoute.js

@@ -3,11 +3,11 @@ const getRoutesManifest = require("./getRoutesManifest");
 const { dataRoutes } = getRoutesManifest();
 
 // Return true if the route has a data route in the routes manifest
-const isRouteInPrerenderManifest = (route) => {
+const isRouteWithDataRoute = (route) => {
   // If no data routes exist, return false
   if (dataRoutes == null) return false;
 
   return dataRoutes.find((dataRoute) => dataRoute.page === route);
 };
 
-module.exports = isRouteInPrerenderManifest;
+module.exports = isRouteWithDataRoute;

lib/pages/getServerSideProps/redirects.js

@@ -1,53 +1,43 @@
 const getNetlifyFunctionName = require("../../helpers/getNetlifyFunctionName");
 const getDataRouteForRoute = require("../../helpers/getDataRouteForRoute");
+const getLocaleRoutesForI18n = require("../../helpers/getLocaleRoutesForI18n");
 const pages = require("./pages");
-const nextConfig = require("../../helpers/getNextConfig")();
 
 const redirects = [];
 
 /** getServerSideProps pages
  *
- * Params:
- * route examples -> '/ssr', '/ssr/[id]'
- * filePath examples -> 'pages/ssr.js', 'pages/ssr/[id].js'
- *
- * With i18n enabled:
- * route and filePath formats are the same as above
- *
+ * Page params {
+ *    route -> '/ssr', '/ssr/[id]'
+ *    filePath -> 'pages/ssr.js', 'pages/ssr/[id].js'
+ * }
  **/
 
 pages.forEach(({ route, filePath }) => {
   const functionName = getNetlifyFunctionName(filePath);
   const target = `/.netlify/functions/${functionName}`;
 
-  // If i18n, need to add extra redirects for each locale
-  // i.e. /en/ssr -> /${target}
-  if (nextConfig.i18n) {
-    const { locales = [] } = nextConfig.i18n;
-    locales.forEach((locale) => {
-      redirects.push({
-        route: `/${locale}${route}`,
-        target,
-      });
-      redirects.push({
-        route:
-          route === "/"
-            ? getDataRouteForRoute(`/${locale}`)
-            : getDataRouteForRoute(route, locale),
-        target,
-      });
+  // Add any locale redirects if i18n
+  getLocaleRoutesForI18n({ route }).forEach((localeRoute) => {
+    redirects.push({
+      route: localeRoute.route,
+      target,
     });
-  }
+    redirects.push({
+      route: localeRoute.dataRoute,
+      target,
+    });
+  });
 
-  // Add one redirect for the default page/route
+  // Add one redirect for the naked route
   // i.e. /ssr
   redirects.push({
     route,
     target,
   });
 
-  // Add one redirect for the data route
-  // Next doesn't provide the dataRoute out of the box for us so we
+  // Add one redirect for the data route;
+  // pages-manifest doesn't provide the dataRoute for us so we
   // construct it ourselves with getDataRouteForRoute
   redirects.push({
     route: getDataRouteForRoute(route),

lib/pages/getStaticProps/pages.js

@@ -1,7 +1,8 @@
 const getPrerenderManifest = require("../../helpers/getPrerenderManifest");
+const getLocaleRoutesForI18n = require("../../helpers/getLocaleRoutesForI18n");
 
 // Collect pages
-const pages = [];
+let pages = [];
 
 // Get pages using getStaticProps
 const { routes } = getPrerenderManifest();