Merge pull request #19 from netlify/i18n

feat: i18n

Author: lindsaylevine

demo/components/Header.js

@@ -1,3 +1,3 @@
 export default function Header() {
-  return <h1>header</h1>
+  return <h1>Next Demo!</h1>
 }

demo/next.config.js

@@ -1,10 +1,12 @@
 module.exports = {
+  // Configurable site features we support:
+  // distDir: 'build',
   generateBuildId: () => 'build-id',
-  // Configurable site features to support:
-  // i18n: {
-  //   defaultLocale: 'en',
-  //   locales: ['en', 'es', 'fr']
-  // },
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'es', 'fr']
+  },
+  // trailingSlash: true,
+  // Configurable site features _to_ support:
   // basePath: '/docs',
-  // distDir: 'build',
 }

demo/pages/404.js

@@ -0,0 +1,3 @@
+export default function Custom404() {
+  return <h1>Custom 404 - Page Not Found</h1>
+}

demo/pages/500.js

@@ -0,0 +1,3 @@
+export default function Custom500() {
+  return <h1>Custom 500 - Server-side error occurred</h1>
+}

demo/pages/index.js

@@ -1,8 +1,12 @@
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+const Header = dynamic(() => import(/* webpackChunkName: 'header' */ '../components/Header'), { ssr: true })
 
 const Index = ({ shows }) => (
   <div>
     <img src="/next-on-netlify.png" alt="NextJS on Netlify Banner" style={{ maxWidth: '100%' }} />
+    
+    <Header/>
 
     <h1>NextJS on Netlify</h1>
     <p>

demo/public/favicon.ico

@@ -51,7 +51,7 @@ const getNetlifyRoutes = (nextRoute) => {
   return netlifyRoutes
 }
 
-exports.generateRedirects = async ({ netlifyConfig, basePath }) => {
+exports.generateRedirects = async ({ netlifyConfig, basePath, i18n }) => {
   const { dynamicRoutes } = await readJSON(join(netlifyConfig.build.publish, 'prerender-manifest.json'))
 
   const redirects = []
@@ -76,9 +76,12 @@ exports.generateRedirects = async ({ netlifyConfig, basePath }) => {
     redirects.push(...getNetlifyRoutes(route), ...getNetlifyRoutes(dataRoute))
   })
 
+  // Needed only for /_next/static
+  const i18nSplat = i18n ? '/:locale' : ''
+
   // This is only used in prod, so dev uses `next dev` directly
   netlifyConfig.redirects.push(
-    { from: `${basePath}/_next/static/*`, to: '/static/:splat', status: 200 },
+    { from: `${basePath}${i18nSplat}/_next/static/*`, to: `${i18nSplat}/static/:splat`, status: 200 },
     {
       from: `${basePath}/*`,
       to: HANDLER_FUNCTION_PATH,

demo/public/next-on-netlify.png

@@ -42,7 +42,7 @@ module.exports = {
 
     checkNextSiteHasBuilt({ publish, failBuild })
 
-    const { images, target, appDir, basePath } = await getNextConfig({ publish, failBuild })
+    const { appDir, basePath, i18n, images, target } = await getNextConfig({ publish, failBuild })
 
     setBundler({ netlifyConfig, target })
 
@@ -59,6 +59,7 @@ module.exports = {
     await generateRedirects({
       netlifyConfig,
       basePath,
+      i18n,
     })
   },
 

demo/public/vercel.svg

@@ -72,9 +72,9 @@ Array [
     "to": "/404.html",
   },
   Object {
-    "from": "/_next/static/*",
+    "from": "/:locale/_next/static/*",
     "status": 200,
-    "to": "/static/:splat",
+    "to": "/:locale/static/:splat",
   },
   Object {
     "conditions": Object {