Skip to content

Commit 1b22a39

Browse files
ijjkijjk
authored
Add initial example for i18n routing (#18206)
This is a follow-up to #18067 adding an example for i18n routing x-ref: #17370
1 parent 046deab commit 1b22a39

File tree

8 files changed

+248
-0
lines changed

8 files changed

+248
-0
lines changed

‎examples/i18n-routing/.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎examples/i18n-routing/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Internationalized Routing
2+
3+
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.
4+
5+
For further documentation on this feature see the documentation [here](https://nextjs.org/docs/advanced-features/i18n-routing)
6+
7+
## Deploy your own
8+
9+
Deploy the example using [Vercel](https://vercel.com):
10+
11+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/amp)
12+
13+
## How to use
14+
15+
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:
16+
17+
```bash
18+
npx create-next-app --example i18n-routing i18n-app
19+
# or
20+
yarn create next-app --example i18n-routing i18n-app
21+
```
22+
23+
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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
i18n: {
3+
locales: ['en', 'fr', 'nl'],
4+
defaultLocale: 'en',
5+
},
6+
}

‎examples/i18n-routing/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "i18n-routing",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "latest",
11+
"react": "^16.7.0",
12+
"react-dom": "^16.7.0"
13+
},
14+
"license": "MIT"
15+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import Link from 'next/link'
2+
import { useRouter } from 'next/router'
3+
4+
export default function GspPage(props) {
5+
const router = useRouter()
6+
const { defaultLocale, isFallback, query } = router
7+
8+
if (isFallback) {
9+
return 'Loading...'
10+
}
11+
12+
return (
13+
<div>
14+
<h1>getServerSideProps page</h1>
15+
<p>Current slug: {query.slug}</p>
16+
<p>Current locale: {props.locale}</p>
17+
<p>Default locale: {defaultLocale}</p>
18+
<p>Configured locales: {JSON.stringify(props.locales)}</p>
19+
20+
<Link href="/gsp">
21+
<a>To getStaticProps page</a>
22+
</Link>
23+
<br />
24+
25+
<Link href="/gssp">
26+
<a>To getServerSideProps page</a>
27+
</Link>
28+
<br />
29+
30+
<Link href="/">
31+
<a>To index page</a>
32+
</Link>
33+
<br />
34+
</div>
35+
)
36+
}
37+
38+
export const getStaticProps = ({ locale, locales }) => {
39+
return {
40+
props: {
41+
locale,
42+
locales,
43+
},
44+
}
45+
}
46+
47+
export const getStaticPaths = ({ locales }) => {
48+
const paths = []
49+
50+
for (const locale of locales) {
51+
paths.push({ params: { slug: 'first' }, locale })
52+
paths.push({ params: { slug: 'second' }, locale })
53+
}
54+
55+
return {
56+
paths,
57+
fallback: true,
58+
}
59+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Link from 'next/link'
2+
import { useRouter } from 'next/router'
3+
4+
export default function GspPage(props) {
5+
const router = useRouter()
6+
const { defaultLocale } = router
7+
8+
return (
9+
<div>
10+
<h1>getServerSideProps page</h1>
11+
<p>Current locale: {props.locale}</p>
12+
<p>Default locale: {defaultLocale}</p>
13+
<p>Configured locales: {JSON.stringify(props.locales)}</p>
14+
15+
<Link href="/gsp/first">
16+
<a>To dynamic getStaticProps page</a>
17+
</Link>
18+
<br />
19+
20+
<Link href="/gssp">
21+
<a>To getServerSideProps page</a>
22+
</Link>
23+
<br />
24+
25+
<Link href="/">
26+
<a>To index page</a>
27+
</Link>
28+
<br />
29+
</div>
30+
)
31+
}
32+
33+
export const getStaticProps = ({ locale, locales }) => {
34+
return {
35+
props: {
36+
locale,
37+
locales,
38+
},
39+
}
40+
}

‎examples/i18n-routing/pages/gssp.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Link from 'next/link'
2+
import { useRouter } from 'next/router'
3+
4+
export default function GsspPage(props) {
5+
const router = useRouter()
6+
const { defaultLocale } = router
7+
8+
return (
9+
<div>
10+
<h1>getServerSideProps page</h1>
11+
<p>Current locale: {props.locale}</p>
12+
<p>Default locale: {defaultLocale}</p>
13+
<p>Configured locales: {JSON.stringify(props.locales)}</p>
14+
15+
<Link href="/gsp">
16+
<a>To getStaticProps page</a>
17+
</Link>
18+
<br />
19+
20+
<Link href="/gsp/first">
21+
<a>To dynamic getStaticProps page</a>
22+
</Link>
23+
<br />
24+
25+
<Link href="/">
26+
<a>To index page</a>
27+
</Link>
28+
<br />
29+
</div>
30+
)
31+
}
32+
33+
export const getServerSideProps = ({ locale, locales }) => {
34+
return {
35+
props: {
36+
locale,
37+
locales,
38+
},
39+
}
40+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Link from 'next/link'
2+
import { useRouter } from 'next/router'
3+
4+
export default function IndexPage(props) {
5+
const router = useRouter()
6+
const { locale, locales, defaultLocale } = router
7+
8+
return (
9+
<div>
10+
<h1>Index page</h1>
11+
<p>Current locale: {locale}</p>
12+
<p>Default locale: {defaultLocale}</p>
13+
<p>Configured locales: {JSON.stringify(locales)}</p>
14+
15+
<Link href="/gsp">
16+
<a>To getStaticProps page</a>
17+
</Link>
18+
<br />
19+
20+
<Link href="/gsp/first">
21+
<a>To dynamic getStaticProps page</a>
22+
</Link>
23+
<br />
24+
25+
<Link href="/gssp">
26+
<a>To getServerSideProps page</a>
27+
</Link>
28+
<br />
29+
</div>
30+
)
31+
}

0 commit comments

Comments
 (0)