diff --git a/middleware.ts b/middleware.ts new file mode 100644 index 0000000000..62899c284f --- /dev/null +++ b/middleware.ts @@ -0,0 +1,9 @@ +import { NextRequest, NextResponse } from 'next/server'; + +const middleware = async (request: NextRequest) => { + const country = request.geo?.country || 'US'; + request.nextUrl.searchParams.set('country', country); + return NextResponse.rewrite(request.nextUrl); +}; + +export default middleware; diff --git a/src/hooks/useGetUserLanguage.ts b/src/hooks/useGetUserLanguage.ts new file mode 100644 index 0000000000..d2925c717a --- /dev/null +++ b/src/hooks/useGetUserLanguage.ts @@ -0,0 +1,15 @@ +import { useEffect, useState } from 'react'; + +const useGetUserLanguage = () => { + const [userLanguage, setUserLanguage] = useState(''); + + useEffect(() => { + if (navigator.language || navigator.userLanguage) { + const language = navigator.language || navigator.userLanguage; + setUserLanguage(language); + } + }, []); + + return { userLanguage }; +}; +export default useGetUserLanguage; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 67c01af50a..18038558b8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,8 @@ +/* eslint-disable i18next/no-literal-string */ /* eslint-disable react/no-multi-comp */ -import React from 'react'; import classNames from 'classnames'; -import { NextPage, GetStaticProps } from 'next'; +import { GetServerSideProps, NextPage } from 'next'; import Head from 'next/head'; import useTranslation from 'next-translate/useTranslation'; @@ -23,10 +23,29 @@ import ChaptersData from 'types/ChaptersData'; type IndexProps = { chaptersResponse: ChaptersResponse; chaptersData: ChaptersData; + country?: string; }; -const Index: NextPage = ({ chaptersResponse: { chapters } }): JSX.Element => { +export const getServerSideProps: GetServerSideProps = async ({ locale, query }) => { + const allChaptersData = await getAllChaptersData(locale); + + return { + props: { + country: query.country, + chaptersData: allChaptersData, + chaptersResponse: { + chapters: Object.keys(allChaptersData).map((chapterId) => { + const chapterData = allChaptersData[chapterId]; + return { ...chapterData, id: Number(chapterId) }; + }), + }, + }, + }; +}; + +const Index: NextPage = ({ chaptersResponse: { chapters }, country }): JSX.Element => { const { t, lang } = useTranslation('home'); + return ( <> @@ -39,6 +58,8 @@ const Index: NextPage = ({ chaptersResponse: { chapters } }): JSX.El />
+ {country ?

{country}

:

No country detected

} +
@@ -58,20 +79,4 @@ const Index: NextPage = ({ chaptersResponse: { chapters } }): JSX.El ); }; -export const getStaticProps: GetStaticProps = async ({ locale }) => { - const allChaptersData = await getAllChaptersData(locale); - - return { - props: { - chaptersData: allChaptersData, - chaptersResponse: { - chapters: Object.keys(allChaptersData).map((chapterId) => { - const chapterData = allChaptersData[chapterId]; - return { ...chapterData, id: Number(chapterId) }; - }), - }, - }, - }; -}; - export default Index; diff --git a/types/global.d.ts b/types/global.d.ts index 3f79836c96..02bb4ece62 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -4,3 +4,7 @@ declare module '*.svg' { const content: (props: SVGProps) => ReactElement; export default content; } + +interface NavigatorLanguage { + userLanguage?: string; +}