# i18n routing in NextJS + Jetstream

# what do localised paths look like in jetstream vs in nextjs

- let's test that assumption with a PR to the cloudfront repo: https://gitlab.com/vistaprint-org/technology-operations/web-platform/jetstream/edge-services-product-line/cloudflare-edge-configuration/-/merge_requests/615/diffs
vistaprint.com/design> /design //doesn't need a locale, we've said `en-US` is the default so it's not added to the path
vistaprint.ie/design -> /design/en-IE
vistaprint.fr/services-graphique -> /design/fr-FR
vistaprint.ca/design -> /design/en-CA
vistaprint.ca/fr/services-graphique -> /design/fr-CA

- What code config is deployed?
- what jetstream settings do we have?

| locale | Jetstream | next config |
| -- | -- | -- |
| [canada (.ca)](https://staging.vistaprint.ca/design/design) WORKING document and assets| [Jetstream config](https://vistaprint.atlassian.net/wiki/spaces/JET/pages/1098384119/CA+Vistaprint)  | `const basePath = '/design';` [nextJS config](https://github.com/99designs/frontend/blob/b7c73bbb328b24023b7c68364749dfb73e05e4cf/apps/design-services/next.config.js) |
| [USA (.com)](https://staging.vistaprint.com/design) Root 404s, `/design/design` redirects to root and then 404s | [Jetstream config](https://vistaprint.atlassian.net/wiki/spaces/JET/pages/1445953557/STAGING.VISTAPRINT.COM)  | `const basePath = '/design';` [nextJS config](https://github.com/99designs/frontend/blob/b7c73bbb328b24023b7c68364749dfb73e05e4cf/apps/design-services/next.config.js) |
| [Australia (.com.au)](https://staging.vistaprint.com.au/design) Results in infinite loop | [Jetstream config](https://vistaprint.atlassian.net/wiki/spaces/JET/pages/598771688/COM+AU+Vistaprint#Routes---Staging)  | no asset prefix, yes basepath, also includes redirect [next config](https://github.com/99designs/frontend/pull/6457/files) |

What works?
- jetstream points at the basepath of the app (aka `/design`); this is in line with how Bastion works as a proxy, no redirects
- next config includes a basepath, to offset the entrypoint of both assets and documents (assets are at /design/_next/blah blah)
- nothing is at the root (document 404s, no assets live here)
-

## Why do we set jetstream origin path?
The entry point for our app is `/design`

This is how Vistapro was also configred: https://gitlab.com/vistaprint-org/technology-operations/web-platform/jetstream/edge-services-product-line/cloudflare-edge-configuration/-/merge_requests/615

## What does `basePath` mean for us?
It means whatever _would_ have rendered as `/` which in next is `index.ts` now renders at the basepath value, and every other route is prefixed with the basepath.

If we put `/design` as basePath, we need Jetstream to be set to `/design` for the origin _path_

Internal page routing: When linking to other pages using next/link and next/router the basePath will be automatically applied.

Image assets: When using the next/image component, you will need to add the basePath in front of src.

https://nextjs.org/docs/api-reference/next.config.js/basepath

### What it means for future mounting of routes?
Unless we do anything special, all our routes get prefixed with `/design`

e.g. `/design/brief` or potentially for product pages `/design/[Product_ID]`


### Should we set it for prod only? Or in dev too...?
If we _don't_ put anything, the root of our app will always 404 (cause there's nothing there)

## What is `assetPrefix` for?
It's mostly for routing your assets through a CDN in prod. We don't need to do this because all of vista's stuff is behind a cloudflare CDN anyway.

https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

## What do `redirects` do ..?
Do what they say on the tin. We _could_ use it to make the root redirect to the basepath so no 404 but then in prod jetstream and the nextconfig fight each other and that causes an infinite loop in prod (/design => / => /design = /)

## Locales in the path - what does that mean for jetstream?
Look at what vista logos does? https://vistaprint.atlassian.net/wiki/spaces/JET/pages/912032936/FR+Vistaprint

Will probably need to include the locale in the path

# Decision
- use what's working now
- accept that the root of the app will always 404 ? And document it! The alternative is the cognitive overhead of remembering dev and prod routes will be different (or adding custom redirects just for dev env).

TBD - what happens if we have basePath + jetstream origin path + a redirect...?

And - follow up for local dev improvement, test this out on staging at some point
Jestream receives a request for `design` and routes it to `platform.99d/design`
NextApp considers `/design` as the entrypoint - renders the index route contents
Mayyyybe redirect could be used in dev so we never see `/` - it always redirects to `/design`?