Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

[Issue #134] Renable static rendering #85

Merged
merged 3 commits into from
Jul 5, 2024
Merged

[Issue #134] Renable static rendering #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac1527a
Renable static rendering
acouch Jun 15, 2024
bd66297
Remove page tests
acouch Jul 3, 2024
6435c62
Remove Layout test
acouch Jul 3, 2024
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
54 changes: 54 additions & 0 deletions frontend/src/app/[locale]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { NextIntlClientProvider } from "next-intl";
import { getMessages, unstable_setRequestLocale } from "next-intl/server";

import { GoogleAnalytics } from "@next/third-parties/google";
import { PUBLIC_ENV } from "src/constants/environments";

import Layout from "src/components/Layout";

/**
* Root layout component, wraps all pages.
* @see https://nextjs.org/docs/app/api-reference/file-conventions/layout
*/
import { Metadata } from "next";

export const metadata: Metadata = {
icons: [`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/img/favicon.ico`],
};

interface Props {
children: React.ReactNode;
params: {
locale: string;
};
}

const locales = ["en", "es"];

export function generateStaticParams() {
return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({ children, params }: Props) {
const { locale } = params;

// Enable static rendering
unstable_setRequestLocale(locale);

// Providing all messages to the client
// side is the easiest way to get started
const messages = await getMessages();

return (
<html lang={locale}>
<head>
<GoogleAnalytics gaId={PUBLIC_ENV.GOOGLE_ANALYTICS_ID} />
</head>
<body>
<NextIntlClientProvider messages={messages}>
<Layout locale={locale}>{children}</Layout>
</NextIntlClientProvider>
</body>
</html>
);
}
3 changes: 2 additions & 1 deletion frontend/src/app/[locale]/newsletter/confirmation/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import PageSEO from "src/components/PageSEO";
import BetaAlert from "src/components/BetaAlert";
import { useTranslations } from "next-intl";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
Copy link
Member

Choose a reason for hiding this comment

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

Should we add a code comment here that unstable_setRequestLocale is a temporary API that next-intl aims to remove it in the future?

Copy link
Member

Choose a reason for hiding this comment

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

…and that, per their docs, you must be "cautious to apply it in all relevant places"

Copy link
Member

Choose a reason for hiding this comment

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

Maybe we make a ticket for dealing with this in the future?

Copy link
Member Author

Choose a reason for hiding this comment

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

The name unstable_ is a common convention and speaks for itself, and this is used in every page, so would opt not to comment in the code. I'll create a ticket to remove it. It could be a while based on amannn/next-intl#663


export async function generateMetadata() {
const t = await getTranslations({ locale: "en" });
Expand All @@ -21,6 +21,7 @@ export async function generateMetadata() {
}

export default function NewsletterConfirmation() {
unstable_setRequestLocale("en");
const t = useTranslations("Newsletter_confirmation");

return (
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/[locale]/newsletter/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import PageSEO from "src/components/PageSEO";
import BetaAlert from "src/components/BetaAlert";
import NewsletterForm from "src/app/[locale]/newsletter/NewsletterForm";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
import {
useTranslations,
useMessages,
Expand All @@ -25,6 +25,7 @@ export async function generateMetadata() {
}

export default function Newsletter() {
unstable_setRequestLocale("en");
const t = useTranslations("Newsletter");
const messages = useMessages();

Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/[locale]/newsletter/unsubscribe/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import PageSEO from "src/components/PageSEO";
import BetaAlert from "src/components/BetaAlert";
import { useTranslations } from "next-intl";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";

export async function generateMetadata() {
const t = await getTranslations({ locale: "en" });
Expand All @@ -21,6 +21,7 @@ export async function generateMetadata() {
}

export default function NewsletterUnsubscribe() {
unstable_setRequestLocale("en");
const t = useTranslations("Newsletter_unsubscribe");

return (
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/app/[locale]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import IndexGoalContent from "src/components/content/IndexGoalContent";
import ProcessAndResearchContent from "src/components/content/ProcessAndResearchContent";
import { Metadata } from "next";
import { useTranslations } from "next-intl";
import { getTranslations } from "next-intl/server";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";

export async function generateMetadata() {
const t = await getTranslations({ locale: "en" });
Expand All @@ -17,6 +17,8 @@ export async function generateMetadata() {
}

export default function Home() {
unstable_setRequestLocale("en");

const t = useTranslations("Index");

return (
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/[locale]/process/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import ProcessIntro from "src/app/[locale]/process/ProcessIntro";
import ProcessInvolved from "src/app/[locale]/process/ProcessInvolved";
import ProcessMilestones from "src/app/[locale]/process/ProcessMilestones";
import { useTranslations } from "next-intl";
import { getTranslations } from "next-intl/server";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";

export async function generateMetadata() {
const t = await getTranslations({ locale: "en" });
Expand All @@ -21,6 +21,7 @@ export async function generateMetadata() {
}

export default function Process() {
unstable_setRequestLocale("en");
const t = useTranslations("Process");

return (
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/app/[locale]/research/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import ResearchMethodology from "src/app/[locale]/research/ResearchMethodology";
import ResearchThemes from "src/app/[locale]/research/ResearchThemes";
import { Metadata } from "next";
import { useTranslations } from "next-intl";
import { getTranslations } from "next-intl/server";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";

export async function generateMetadata() {
const t = await getTranslations({ locale: "en" });
Expand All @@ -22,6 +22,8 @@ export async function generateMetadata() {
}

export default function Research() {
unstable_setRequestLocale("en");

const t = useTranslations("Research");

return (
Expand Down
44 changes: 5 additions & 39 deletions frontend/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,10 @@
import "src/styles/styles.scss";
import { GoogleAnalytics } from "@next/third-parties/google";
import { PUBLIC_ENV } from "src/constants/environments";
import { ReactNode } from "react";

import Layout from "src/components/Layout";
import { unstable_setRequestLocale } from "next-intl/server";
/**
* Root layout component, wraps all pages.
* @see https://nextjs.org/docs/app/api-reference/file-conventions/layout
*/
import { Metadata } from "next";

export const metadata: Metadata = {
icons: [`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/img/favicon.ico`],
type Props = {
children: ReactNode;
};

interface LayoutProps {
children: React.ReactNode;
params: {
locale: string;
};
}

export default function RootLayout({ children, params }: LayoutProps) {
// Hardcoded until the [locale] routing is enabled.
const locale = params.locale ? params.locale : "en";
// TODO: Remove when https://github.com/amannn/next-intl/issues/663 lands.
unstable_setRequestLocale(locale);

return (
<html lang={locale}>
<head>
<GoogleAnalytics gaId={PUBLIC_ENV.GOOGLE_ANALYTICS_ID} />
</head>
<body>
{/* Separate layout component for the inner-body UI elements since Storybook
and tests trip over the fact that this file renders an <html> tag */}

{/* TODO: Add locale="english" prop when ready for i18n */}
<Layout locale={locale}>{children}</Layout>
</body>
</html>
);
export default function RootLayout({ children }: Props) {
return children;
}
17 changes: 0 additions & 17 deletions frontend/src/app/template.tsx
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions frontend/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
useMessages,
NextIntlClientProvider,
} from "next-intl";
import { unstable_setRequestLocale } from "next-intl/server";
import pick from "lodash/pick";

type Props = {
Expand All @@ -14,6 +15,8 @@ type Props = {
};

export default function Layout({ children, locale }: Props) {
unstable_setRequestLocale(locale);

const t = useTranslations();
const messages = useMessages();

Expand Down
29 changes: 0 additions & 29 deletions frontend/tests/components/Layout.test.tsx
View file
Open in desktop

This file was deleted.

34 changes: 0 additions & 34 deletions frontend/tests/pages/index.test.tsx
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions frontend/tests/pages/newsletter/confirmation.test.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading