Skip to content

Commit

Permalink
Add withTranslateRoutes in _app
Browse files Browse the repository at this point in the history
- deprecate useRouter and withRouter
  • Loading branch information
cvolant committed Aug 25, 2021
1 parent 85ec7b5 commit ebb4ae8
Show file tree
Hide file tree
Showing 8 changed files with 439 additions and 380 deletions.
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"prettier"
Expand Down
80 changes: 41 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ _Back to Next file-base routing system while remaining free from its limits_

## Features

- __Translated paths segments__
- **Translated paths segments**
Ex: `/contact-us` and `/fr/contactez-nous`.
- __Complex paths segments__ (path-to-regexp synthax)
- **Complex paths segments** (path-to-regexp synthax)
Ex: `/:id{-:slug}?/`
- __Constrained dynamic paths segments__ (path-to-regexp synthax)
- **Constrained dynamic paths segments** (path-to-regexp synthax)
Ex: `/:id(\\d+)/`
- __No duplicated content (SEO)__
- **No duplicated content (SEO)**
Simple rewrites would make a page accessible with 2 different urls which is bad for SEO.
- __Auto-redirection to correct translated path__
- **Auto-redirection to correct translated path**
Ex: `/fr/english/path` redirects to `/fr/french/path`
- __No custom server needed!__
- **No custom server needed!**
Next automatic static optimization remains available.

## Motivation
Expand Down Expand Up @@ -53,7 +53,8 @@ module.exports = withTranslateRoutes({

#### 2. Define your routes

You can add a `routes.json` file in the `pages` folder, and in the every subfolder where you want to define routes, with the following:
You can add a `routes.json` file in the `pages` folder, and in the every subfolder where you want to define routes, with the following:

```js
// `/pages/section/routes.json`
{
Expand All @@ -66,17 +67,41 @@ You can add a `routes.json` file in the `pages` folder, and in the every subfold
},
"page2": "definition", // Overwrite the page path for all language
}
```
```

The "/" section define the folder paths, each other section define the paths of a page file in this folder.

#### 3. Use the next-translate-routes Link, useRouter, and withRouter
#### 3. Wrap you \_app component with the withTranslateRoutes hoc

```js
// `/pages/_app.js`
import { App } from 'next/app'
import { withTranslateRoutes } from 'next-translate-routes'

export default withTranslateRoutes(App)
```
Or:
```js
// `/pages/_app.js`
import { withTranslateRoutes } from 'next-translate-routes'

next-translate-routes extends Next Link, useRouter, withRouter, to translate routes automatically: import them from 'next-translate-route' instead of 'next/link' and 'next/router', and use them as you ever did.
const App = ({ Component, pageProps, router }) => {
// Custom code...

return <Component {...pageProps} />
}

export default withTranslateRoutes(App)
```

#### 4. Use the next-translate-routes Link

next-translate-routes extends Next Link to translate routes automatically: import it from 'next-translate-routes' instead of 'next/link' and use as you ever did.

```jsx
import React, { useEffect, useState } from 'react'

import { Link, useRouter, withRouter } from 'next-translate-routes'
import { Link } from 'next-translate-routes'

const MyLinks = () => {
const { locales } = useRouter()
Expand All @@ -91,30 +116,6 @@ const MyLinks = () => {
)
}

const ComponentWithUseRouter = ({ lang }) => {
const router = useRouter()

useEffect(() => {
if (router.locale !== lang) {
router.push({ pathname: '/' }, { locale: lang })
}
})

return <MyLinks />
}

const ComponentWithWithRouter = withRouter(({ lang, router }) => {
const [, setPrefetched] = useState(false)
useEffect(() => {
setPrefetched((previousPrefetched) => {
router.prefetch({ pathname: '/page/to/prefetch' }, { locale: lang })
})
}, [lang, router])

return <MyLinks />
})


```
### Constrained dynamic paths segments
Expand All @@ -126,11 +127,13 @@ const ComponentWithWithRouter = withRouter(({ lang, router }) => {
"[slug]": ":slug(\\w+)", // Constrain a dynamic page segment (to be letters here)
}
```
For a catch all route: `"[...path]": ":path*"`.
### Ignoring a path part
This will ignore the `blog` path segment:
```js
// `/pages/blog/routes.json`
{
Expand All @@ -150,6 +153,7 @@ This will ignore the `blog` path segment:
It is also possible to create a path segment with 2 dynamic parameters. Ex: `/articles/:id{-:slug}?`.
First, create a path segment for each dynamic parameter: `/articles/[id]/[slug].
Then:

```js
// `/articles/[id]/routes.json`
{
Expand Down Expand Up @@ -184,15 +188,13 @@ module.exports = withTranslateRoutes({
// ...Remaining next config
})
```

`routesTree` must be of type `TRouteBranch`:

```typescript
type TRouteBranch<Locale extends string> = {
name: string
paths: { default: string } & Partial<Record<Locale, string>>
children?: TRouteBranch[]
}
```

### Warning

The router prop received by the App and Pages components is a bare Next router: if you want to use next-translate-routes router, you need to inject it with useRouter or withRouter.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
"react": "^17.0.2"
},
"files": [
"config.js",
"config.d.ts",
"index.js",
"index.d.ts",
"plugin.js",
Expand All @@ -48,6 +50,7 @@
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^27.0.5",
"np": "^7.5.0",
"prettier": "^2.3.2",
Expand Down
Loading

0 comments on commit ebb4ae8

Please sign in to comment.