Skip to content

Working v3 header cookie redirect #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Working v3 header cookie redirect #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
115251b
add i18n
Nov 12, 2021
8443476
chore: add manual redirects
Nov 12, 2021
f76fcd0
chore: expand redirect
Nov 12, 2021
ad496e4
chore: try with middleware
Nov 12, 2021
bda2e3a
chore: fix loop
Nov 12, 2021
e3712ac
chore: test
Nov 12, 2021
6c48481
chore: try server side props
Nov 12, 2021
9f1b116
chore: doublecheck that this works
Nov 12, 2021
90b96d1
chore: add testing steps
Nov 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'es', 'fr']
}
}
44 changes: 42 additions & 2 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'

export default function Home() {
export default function Home({locale}) {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You do not need to actually pass the locale, we use it in the demo for visual purposes.

return (
<div className="container">
<Head>
Expand All @@ -13,11 +13,51 @@ export default function Home() {
<main>
<Header title="Welcome to my app!" />
<p className="description">
Get started by editing <code>pages/index.js</code>
<strong>Locale: {locale}</strong>
</p>
<p>(you should see it appended to this site's url if your browser does not use the default one, <code>en</code> )</p>
<p>In v3 of the next plugin, the <code>NEXT_LOCALE</code> and the `Accept-Language` header is not detected. This is fixed in v4. The workaround is manually detecting if the cookie and header exist and changing the behavior of your site in consequence.</p>
<a href="https://github.com/netlify/netlify-plugin-nextjs/issues/788#issue-1050456600">See GitHub Issue for full context</a>
<p>
Test steps for this page:
<ol>
<li>
Change your default browser language to french. In Chrome: language to french (Settings -> Advanced -> Language -> Add French -> Move to top)
</li>
<li>
Refresh this page, you should see it appended with <strong>/fr</strong>, and the text on the page should change to show <strong>fr</strong>
</li>
<li>
Open the dev tools to the console
</li>
<li>
Enter <strong>document.cookie="NEXT_LOCALE=es"</strong>
</li>
<li>
Refresh this page. You should see it appended with <strong>/es</strong>
</li>
</ol>
</p>
</main>

<Footer />
</div>
)
}

export async function getServerSideProps(context) {
const acceptLanguageHeader = context?.req?.headers['accept-language']
const nextLocaleCookie = context.req?.cookies?.NEXT_LOCALE
// Force the locale to be either the NEXT_LOCALE cookie or the Accept-Language header
const locale = nextLocaleCookie
? nextLocaleCookie
: acceptLanguageHeader
? acceptLanguageHeader
: context?.req?.locale || "";

return {
props: {
locale
},
}
}