How to force Next.js to always redirect to a preferred user language?

Implementing page redirection based on the user's preferred language in Next.js can be achieved through the following methods:

Method 1: Using Next.js's getInitialProps or getServerSideProps

1. Detecting Language: First, obtain the user's preferred language on the server side by parsing the Accept-Language header.

2. Setting Up Redirection: Based on the parsed language, use Next.js's redirection feature to redirect the user to the correct language version of the page.

Here is an example code using getServerSideProps:

javascript
export async function getServerSideProps({ req, res }) {
    const language = req.headers['accept-language']?.split(',')[0].split('-')[0] || 'en';
    const defaultLocale = 'en';
    const supportedLocales = ['en', 'de', 'fr'];

    // If the user's language is not the default and it is supported, redirect the user
    if (language !== defaultLocale && supportedLocales.includes(language)) {
        return {
            redirect: {
                destination: `/${language}`,
                permanent: false,
            },
        };
    }

    return { props: {} };
}

Method 2: Using Client-Side Redirection

If you prefer to perform language detection and redirection on the client side, implement it using the useEffect hook in a React component:

javascript
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const HomePage = () => {
    const router = useRouter();

    useEffect(() => {
        const defaultLocale = 'en';
        const supportedLocales = ['en', 'de', 'fr'];
        const browserLanguage = navigator.language.split('-')[0];

        // If the browser language is not the default and it is supported, redirect the user
        if (browserLanguage !== defaultLocale && supportedLocales.includes(browserLanguage)) {
            router.push(`/${browserLanguage}`);
        }
    }, []);

    return <div>Welcome to the homepage!</div>;
};

export default HomePage;

Method 3: Using Middleware (Next.js 12+)

Starting from Next.js 12, use middleware to handle language redirection, which can be configured directly in the next.config.js file or customized middleware:

javascript
import { NextResponse } from 'next/server';

export function middleware(request) {
    const language = request.headers.get('accept-language')?.split(',')[0].split('-')[0] || 'en';
    const defaultLocale = 'en';
    const supportedLocales = ['en', 'de', 'fr'];

    if (language !== defaultLocale && supportedLocales.includes(language)) {
        return NextResponse.redirect(`/${language}`);
    }

    return NextResponse.next();
}

Conclusion

The above methods implement page redirection based on the user's preferred language in Next.js. The choice depends on your specific requirements, including SEO support and user experience factors. Server-side methods (such as using getServerSideProps or middleware) are typically more stable and faster, while client-side redirection may be slightly slower but is easier to implement.