Add example pages for i18n routing

Author: ijjk

examples/i18n-routing/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  experimental: {
+    i18n: {
+      locales: ['en', 'fr', 'nl'],
+      defaultLocale: 'en',
+    },
+  },
+}

examples/i18n-routing/pages/gsp/[slug].js

@@ -0,0 +1,59 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function GspPage(props) {
+  const router = useRouter()
+  const { defaultLocale, isFallback, query } = router
+
+  if (isFallback) {
+    return 'Loading...'
+  }
+
+  return (
+    <div>
+      <h1>getServerSideProps page</h1>
+      <p>Current slug: {query.slug}</p>
+      <p>Current locale: {props.locale}</p>
+      <p>Default locale: {defaultLocale}</p>
+      <p>Configured locales: {JSON.stringify(props.locales)}</p>
+
+      <Link href="/gsp">
+        <a>To getStaticProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/gssp">
+        <a>To getServerSideProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/">
+        <a>To index page</a>
+      </Link>
+      <br />
+    </div>
+  )
+}
+
+export const getStaticProps = ({ locale, locales }) => {
+  return {
+    props: {
+      locale,
+      locales,
+    },
+  }
+}
+
+export const getStaticPaths = ({ locales }) => {
+  const paths = []
+
+  for (const locale of locales) {
+    paths.push({ params: { slug: 'first' }, locale })
+    paths.push({ params: { slug: 'second' }, locale })
+  }
+
+  return {
+    paths,
+    fallback: true,
+  }
+}

examples/i18n-routing/pages/gsp/index.js

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function GspPage(props) {
+  const router = useRouter()
+  const { defaultLocale } = router
+
+  return (
+    <div>
+      <h1>getServerSideProps page</h1>
+      <p>Current locale: {props.locale}</p>
+      <p>Default locale: {defaultLocale}</p>
+      <p>Configured locales: {JSON.stringify(props.locales)}</p>
+
+      <Link href="/gsp/first">
+        <a>To dynamic getStaticProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/gssp">
+        <a>To getServerSideProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/">
+        <a>To index page</a>
+      </Link>
+      <br />
+    </div>
+  )
+}
+
+export const getStaticProps = ({ locale, locales }) => {
+  return {
+    props: {
+      locale,
+      locales,
+    },
+  }
+}

examples/i18n-routing/pages/gssp.js

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function GsspPage(props) {
+  const router = useRouter()
+  const { defaultLocale } = router
+
+  return (
+    <div>
+      <h1>getServerSideProps page</h1>
+      <p>Current locale: {props.locale}</p>
+      <p>Default locale: {defaultLocale}</p>
+      <p>Configured locales: {JSON.stringify(props.locales)}</p>
+
+      <Link href="/gsp">
+        <a>To getStaticProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/gsp/first">
+        <a>To dynamic getStaticProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/">
+        <a>To index page</a>
+      </Link>
+      <br />
+    </div>
+  )
+}
+
+export const getServerSideProps = ({ locale, locales }) => {
+  return {
+    props: {
+      locale,
+      locales,
+    },
+  }
+}

examples/i18n-routing/pages/index.js

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function IndexPage(props) {
+  const router = useRouter()
+  const { locale, locales, defaultLocale } = router
+
+  return (
+    <div>
+      <h1>Index page</h1>
+      <p>Current locale: {locale}</p>
+      <p>Default locale: {defaultLocale}</p>
+      <p>Configured locales: {JSON.stringify(locales)}</p>
+
+      <Link href="/gsp">
+        <a>To getStaticProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/gsp/first">
+        <a>To dynamic getStaticProps page</a>
+      </Link>
+      <br />
+
+      <Link href="/gssp">
+        <a>To getServerSideProps page</a>
+      </Link>
+      <br />
+    </div>
+  )
+}

yarn.lock

@@ -15826,9 +15826,10 @@ styled-jsx-plugin-postcss@2.0.1:
     postcss "^7.0.2"
     postcss-load-plugins "^2.3.0"
 
-styled-jsx@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.0.tgz#32335c1a3ecfc923ba4f9c056eeb3d4699006b09"
+styled-jsx@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.1.tgz#d79f306c42c99cefbe8e76f35dad8100dc5c9ecc"
+  integrity sha512-RhW71t3k95E3g7Zq3lEBk+kmf+p4ZME7c5tfsYf9M5mq6CgIvFXkbvhawL2gWriXLRlMyKAYACE89Qa2JnTqUw==
   dependencies:
     "@babel/types" "7.8.3"
     babel-plugin-syntax-jsx "6.18.0"