Localization & i18n support for next export | TypeScript Context for Locale Switchers that are SSG

To create a context that keeps track of the current locale of the website in a Next.js site using TypeScript and class-based paradigm, you can follow these steps:

1. First, create a file named `LocaleContext.tsx` in your project's `contexts` directory. This file will define the context and its provider component.

```typescript
// contexts/LocaleContext.tsx
import React, { createContext, useState } from 'react';

export type Locale = 'en' | 'es' | 'fr';

type LocaleContextValue = {
  locale: Locale;
  setLocale: (locale: Locale) => void;
};

export const LocaleContext = createContext<LocaleContextValue | undefined>(undefined);

export const LocaleProvider: React.FC = ({ children }) => {
  const [locale, setLocale] = useState<Locale>('en');

  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
};
```

2. Next, create a custom `_app.tsx` file in your project's `pages` directory. This file will wrap your application with the `LocaleProvider` to make the context available to all components.

```typescript
// pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { LocaleProvider } from '../contexts/LocaleContext';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <LocaleProvider>
      <Component {...pageProps} />
    </LocaleProvider>
  );
};

export default MyApp;
```

3. Now, in your dynamic route file `[[...slug]].tsx`, you can access the `locale` value from the `LocaleContext` and use it as needed.

```typescript
// pages/[lang]/[[...slug]].tsx
import { useContext } from 'react';
import { LocaleContext, Locale } from '../../contexts/LocaleContext';

const DynamicPage: React.FC = () => {
  const { locale } = useContext(LocaleContext);

  // Use the locale value to render content based on the current locale

  return (
    <div>
      <h1>{`Current Locale: ${locale}`}</h1>
      {/* Rest of the page content */}
    </div>
  );
};

export default DynamicPage;
```

4. Finally, create a language picker component that allows the user to change the current locale by updating the context value.

```typescript
// components/LanguagePicker.tsx
import React, { useContext } from 'react';
import { LocaleContext, Locale } from '../contexts/LocaleContext';

const LanguagePicker: React.FC = () => {
  const { locale, setLocale } = useContext(LocaleContext);

  const handleLocaleChange = (selectedLocale: Locale) => {
    setLocale(selectedLocale);
  };

  return (
    <div>
      <button onClick={() => handleLocaleChange('en')}>English</button>
      <button onClick={() => handleLocaleChange('es')}>Spanish</button>
      <button onClick={() => handleLocaleChange('fr')}>French</button>
      <p>Current Locale: {locale}</p>
    </div>
  );
};

export default LanguagePicker;
```

Now, you can use the `LanguagePicker` component wherever you need a language picker UI in your Next.js application. The selected locale will be stored and managed by the `LocaleContext`, and the dynamic route component `[[...slug]].tsx` can access the current locale from the context to render content based on the selected language.