# Tutorial: localized routing with the language
> Step by step, let's build a sample app with Qwik Speak and a localized router using Qwik City features
## Setup
See [Quick Start](https://robisim74.gitbook.io/qwik-speak/library/quick-start)
## Routing
Let's assume that we want to create a navigation of this type:
* default language (en-US): routes not localized `http://127.0.0.1:4173/`
* other languages (it-IT): localized routes `http://127.0.0.1:4173/it-IT/`
In `routes` root level add `[...lang]` directory to catch all routes:
```
src/routes/
│
└───[...lang]/
index.tsx
layout.tsx
```
Now let's handle it. Update `plugin.ts` in the root of the `src/routes` directory:
*src/routes/plugin.ts*
```typescript
import type { RequestHandler } from '@builder.io/qwik-city';
import { setSpeakContext, validateLocale } from 'qwik-speak';
import { config } from '../speak-config';
/**
* This middleware function must only contain the logic to set the locale,
* because it is invoked on every request to the server.
* Avoid redirecting or throwing errors here, and prefer layouts or pages
*/
export const onRequest: RequestHandler = ({ params, locale }) => {
let lang: string | undefined = undefined;
if (params.lang && validateLocale(params.lang)) {
// Check supported locales
lang = config.supportedLocales.find(value => value.lang === params.lang)?.lang;
} else {
lang = config.defaultLocale.lang;
}
// Set Speak context (optional: set the configuration on the server)
setSpeakContext(config);
// Set Qwik locale
locale(lang);
};
```
If you want to handle errors or redirects due to the locale, use layouts or pages. For example you could add in `src/routes/layout.tsx`:
```typescript
export const onRequest: RequestHandler = ({ locale, error, redirect }) => {
// E.g. 404 error page
if (!locale()) throw error(404, 'Page not found for requested locale');
// E.g. Redirect
// if (!locale()) {
// const getPath = localizePath();
// throw redirect(302, getPath('/page', 'en-US')); // Let the server know the language to use
// }
};
```
## Usage
Add `index.tsx` with some translation, providing optional default values for each translation: `key@@[default value]`:
*src/routes/\[...lang]/index.tsx*
```tsx
import { inlineTranslate, useFormatDate, useFormatNumber } from 'qwik-speak';
export default component$(() => {
const t = inlineTranslate();
const fd = useFormatDate();
const fn = useFormatNumber();
return (
<>
);
});
```
> Note that it is not necessary to provide the default value in the key once again: it is sufficient and not mandatory to provide it once in the app
> Note the use of a dynamic key (which will therefore only be available at runtime), which we assign to the `runtime` scope
## Change locale
Now we want to change locale. Let's create a `ChangeLocale` component:
*src/components/change-locale/change-locale.tsx*
```tsx
import { useLocation } from '@builder.io/qwik-city';
import { useSpeakLocale, useSpeakConfig, useDisplayName, inlineTranslate, localizePath } from 'qwik-speak';
export const ChangeLocale = component$(() => {
const t = inlineTranslate();
const pathname = useLocation().url.pathname;
const locale = useSpeakLocale();
const config = useSpeakConfig();
const dn = useDisplayName();
const getPath = localizePath();
return (
<>