Repository: next.js
Issue: The `app-dir-i18n-routing` example doesn't respect defaultLocale and doesn't preserve selected locale while navigating
Labels: examples

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Thu Dec 21 02:29:41 PST 2023; root:xnu-10002.81.5~11/RELEASE_ARM64_T8122
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 21.7.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: 9.6.0
Relevant Packages:
  next: 14.2.8 // Latest available version is detected (14.2.8).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 4.9.5
Next.js Config:
  output: N/A
```


### Which example does this report relate to?

app-dir-i18n-routing

### What browser are you using? (if relevant)

Chrome 128.0.6613.119 

### How are you deploying your application? (if relevant)

_No response_

### Describe the Bug


1. The [`dafaultLocale`](https://github.com/vercel/next.js/blob/canary/examples/app-dir-i18n-routing/i18n-config.ts#L2) is not being respected (setting this parameter to anything will still bring `/en` in the url);
2. The locale discards back to the `/en` after changing it to something different(eg `de`) and navigating to the different page.


### Expected Behavior

1. I set `defaultLocale` and i can see it by default.
2. After selecting another locale and navigating to another page - i can see selected locale in the URL.

### To Reproduce

## Issue 1 (`defaultLocale` is not being respected)

### Step 1
Go to the https://github.com/vercel/next.js/blob/canary/examples/app-dir-i18n-routing/i18n-config.ts#L2 and change `defaultLocale` to `de` or `cs`.

### Step 2
Start application.

### Step 3
You will see `http://localhost:3000/en` instead of `http://localhost:3000/de`.


## Issue 2 (locale isn't preserved after changing it and navigating to a different page)

### Step1 
Add new page under `[lang]` folder:

```tsx
// app/[lang]/johnny/page.tsx

import { Locale } from "../../../i18n-config";
import Navigation from "../components/navigation";

export default async function JohnnyPage({
  params: { lang },
}: {
  params: { lang: Locale };
}) {
  return (
    <div>
      <Navigation />
      <div>
        <p>Current locale: {lang}</p>
        
      </div>
    </div>
  );
}
```

### Step 2
Add `Navigation` component:
```tsx
// app/[lang]/components/navigation.tsx

import Link from "next/link"

export default function Navigation () {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">home</Link>
        </li>
        <li>
          <Link href="/johnny">johnny</Link>
        </li>
      </ul>
    </nav>
  )
}

```

### Step 3
Include `Navigation` to the main page:

```tsx
// app/[lang]/page.tsx

import { getDictionary } from "../../get-dictionary";
import { Locale } from "../../i18n-config";
import Counter from "./components/counter";
import LocaleSwitcher from "./components/locale-switcher";
import Navigation from "./components/navigation"; // include Navigation

export default async function IndexPage({
  params: { lang },
}: {
  params: { lang: Locale };
}) {
  const dictionary = await getDictionary(lang);

  return (
    <div>
      <Navigation /> {/* this was added */}
      <LocaleSwitcher />
      <div>
        <p>Current locale: {lang}</p>
        <p>
          This text is rendered on the server:{" "}
          {dictionary["server-component"].welcome}
        </p>
        <Counter dictionary={dictionary.counter} />
      </div>
    </div>
  );
}

```

### Step 4
Start the application

### Step 5
Change locale from `en` to `de`(or `cs`)

### Step 6
In the navigation click on `johnny`

### Step 7
The redirection will be happen to http://localhost:3000/en/johnny (instead of http://localhost:3000/de/johnny).