Add initial example for i18n routing (#18206)

This is a follow-up to #18067 adding an example for i18n routing

x-ref: #17370

examples/i18n-routing/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/i18n-routing/README.md

@@ -0,0 +1,23 @@
+# Internationalized Routing
+
+This example shows how to create internationalized pages using Next.js and the i18n routing feature. It shows a normal page, a non-dynamic `getStaticProps` page, a dynamic `getStaticProps` page, and a `getServerSideProps` page.
+
+For further documentation on this feature see the documentation [here](https://nextjs.org/docs/advanced-features/i18n-routing)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/amp)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example i18n-routing i18n-app
+# or
+yarn create next-app --example i18n-routing i18n-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/i18n-routing/next.config.js

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

examples/i18n-routing/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "i18n-routing",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "license": "MIT"
+}

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>
+  )
+}