Next-15 (#2474)

* Upgrade next dependencies * Fix compilation errors * Migrate to async props * Fix compilation * Structure improvements * Upgrade to latest deps * Make recharts work * Prettify
Ackuq · Oct 23, 2024 · 26f4ca9 · 26f4ca9
1 parent 903851a
commit 26f4ca9
Show file tree

Hide file tree

Showing 34 changed files with 1,137 additions and 870 deletions.
diff --git a/apps/web/app/api/member/[id]/documents/[page]/route.ts b/apps/web/app/api/member/[id]/documents/[page]/route.ts
@@ -1,16 +1,17 @@
 import getMemberDocuments from "@lib/api/documents/get-member-documents";
 
+type Params = Promise<{
+  id: string;
+  page: string;
+}>;
+
 interface Payload {
-  params: {
-    id: string;
-    page: string;
-  };
+  params: Params;
 }
 
-export async function GET(
-  _request: Request,
-  { params: { id, page } }: Payload,
-) {
+export async function GET(_request: Request, { params }: Payload) {
+  const { id, page } = await params;
+
   const pageInt = parseInt(page);
 
   if (Number.isNaN(pageInt)) {

diff --git a/apps/web/app/debatter/[id]/page.tsx b/apps/web/app/debatter/[id]/page.tsx
@@ -12,13 +12,17 @@ import { routes } from "@lib/navigation";
 
 import Statement from "./statement";
 
+type Params = Promise<{
+  id: string;
+}>;
+
 interface Props {
-  params: {
-    id: string;
-  };
+  params: Params;
 }
 
-export default async function DebatePage({ params: { id } }: Props) {
+export default async function DebatePage({ params }: Props) {
+  const { id } = await params;
+
   const debate = await getDebate(id);
 
   if (!debate) {
@@ -68,9 +72,9 @@ export default async function DebatePage({ params: { id } }: Props) {
   );
 }
 
-export async function generateMetadata({
-  params: { id },
-}: Props): Promise<Metadata> {
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+
   const debate = await getDebate(id);
   if (!debate) {
     return {};

diff --git a/apps/web/app/debatter/page.tsx b/apps/web/app/debatter/page.tsx
@@ -11,18 +11,21 @@ import {
 
 import DebateListWrapper from "./components/debate-list-wrapper";
 
+type SearchParams = Promise<{
+  sok?: string | string[];
+  sida?: string | string[];
+  utskott?: string | string[];
+}>;
+
 interface Props {
-  searchParams: {
-    sok?: string | string[];
-    sida?: string | string[];
-    utskott?: string | string[];
-  };
+  searchParams: SearchParams;
 }
 
-export default function DebatesPage({ searchParams }: Props) {
-  const page = parseNumberSearchParam(searchParams.sida) ?? 1;
-  const search = parseStringSearchParam(searchParams.sok);
-  const committees = parseStringArraySearchParam(searchParams.utskott);
+export default async function DebatesPage({ searchParams }: Props) {
+  const { sida, sok, utskott } = await searchParams;
+  const page = parseNumberSearchParam(sida) ?? 1;
+  const search = parseStringSearchParam(sok);
+  const committees = parseStringArraySearchParam(utskott);
 
   return (
     <main>

diff --git a/apps/web/app/dokument/[id]/page.tsx b/apps/web/app/dokument/[id]/page.tsx
@@ -6,13 +6,17 @@ import SocialMediaShare from "@components/common/social-media-share";
 import getDocumentHtml from "@lib/api/documents/get-document-html";
 import { getDocumentJson } from "@lib/api/documents/get-document-json";
 
+type Params = Promise<{
+  id: string;
+}>;
+
 interface Props {
-  params: {
-    id: string;
-  };
+  params: Params;
 }
 
-export default async function Document({ params: { id } }: Props) {
+export default async function Document({ params }: Props) {
+  const { id } = await params;
+
   const [html, data] = await Promise.all([
     getDocumentHtml(id),
     getDocumentJson(id),
@@ -38,7 +42,9 @@ export default async function Document({ params: { id } }: Props) {
 
 export const runtime = "edge";
 
-export async function generateMetadata({ params: { id } }: Props) {
+export async function generateMetadata({ params }: Props) {
+  const { id } = await params;
+
   const data = await getDocumentJson(id);
   return {
     title: `${data.id}: ${data.title} | Dokument | Partiguiden`,

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -19,6 +19,9 @@ const roboto = Roboto({
   fallback: ["Helvetica", "Arial", "sans-serif"],
 });
 
+// Cache all fetch requests by default
+export const fetchCache = "default-cache";
+
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="sv" suppressHydrationWarning>

diff --git a/apps/web/app/ledamot/[id]/page.tsx b/apps/web/app/ledamot/[id]/page.tsx
@@ -15,13 +15,17 @@ import Profile from "./components/profile";
 import Statistics from "./components/statistics";
 import Tabs from "./components/tabs";
 
+type Params = Promise<{
+  id: string;
+}>;
+
 interface PageProps {
-  params: {
-    id: string;
-  };
+  params: Params;
 }
 
-export default async function MemberPage({ params: { id } }: PageProps) {
+export default async function MemberPage({ params }: PageProps) {
+  const { id } = await params;
+
   const memberPromise = getMemberWithAbsence(id);
   const memberDocumentsPromise = getMemberDocuments({ id, page: 1 });
   const memberTwitterPromise = getMemberTwitterFeed(id);
@@ -66,7 +70,9 @@ export default async function MemberPage({ params: { id } }: PageProps) {
 
 export const runtime = "edge";
 
-export async function generateMetadata({ params: { id } }: PageProps) {
+export async function generateMetadata({ params }: PageProps) {
+  const { id } = await params;
+
   const member = await getMember(id);
 
   if (!member) {

diff --git a/...dersokningar/components/block-builder.tsx → ...omponents/block-builder/block-builder.tsx b/...dersokningar/components/block-builder.tsx → ...omponents/block-builder/block-builder.tsx
diff --git a/apps/web/app/opinionsundersokningar/components/block-builder/without-ssr.tsx b/apps/web/app/opinionsundersokningar/components/block-builder/without-ssr.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const BlockBuilder = dynamic(() => import("./block-builder"), {
+  ssr: false,
+  loading: BlockBuilderLoading,
+});
+
+function BlockBuilderLoading() {
+  return (
+    <div
+      role="status"
+      className="h-[43rem] w-full animate-pulse bg-slate-200 dark:bg-slate-900"
+    />
+  );
+}
+
+export default BlockBuilder;
diff --git a/...sokningar/components/block-statistics.tsx → ...nts/block-statistics/block-statistics.tsx b/...sokningar/components/block-statistics.tsx → ...nts/block-statistics/block-statistics.tsx
diff --git a/apps/web/app/opinionsundersokningar/components/block-statistics/without-ssr.tsx b/apps/web/app/opinionsundersokningar/components/block-statistics/without-ssr.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const BlockStatistics = dynamic(() => import("./block-statistics"), {
+  ssr: false,
+  loading: BlockStatisticsLoading,
+});
+
+function BlockStatisticsLoading() {
+  return (
+    <div
+      role="status"
+      className="h-52 w-full animate-pulse bg-slate-200 dark:bg-slate-900 sm:h-80"
+    />
+  );
+}
+
+export default BlockStatistics;
diff --git a/...ersokningar/components/historic-polls.tsx → ...ponents/historic-polls/historic-polls.tsx b/...ersokningar/components/historic-polls.tsx → ...ponents/historic-polls/historic-polls.tsx
diff --git a/apps/web/app/opinionsundersokningar/components/historic-polls/without-ssr.tsx b/apps/web/app/opinionsundersokningar/components/historic-polls/without-ssr.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const HistoricPolls = dynamic(() => import("./historic-polls"), {
+  ssr: false,
+  loading: HistoricPollsLoading,
+});
+
+function HistoricPollsLoading() {
+  return (
+    <div
+      role="status"
+      className="h-[30rem] w-full animate-pulse bg-slate-200 dark:bg-slate-900"
+    />
+  );
+}
+
+export default HistoricPolls;
diff --git a/...sundersokningar/components/month-poll.tsx → ...ngar/components/month-poll/month-poll.tsx b/...sundersokningar/components/month-poll.tsx → ...ngar/components/month-poll/month-poll.tsx
diff --git a/apps/web/app/opinionsundersokningar/components/month-poll/without-ssr.tsx b/apps/web/app/opinionsundersokningar/components/month-poll/without-ssr.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { twMerge } from "tailwind-merge";
+
+const MonthPoll = dynamic(() => import("./month-poll"), {
+  loading: MonthPollLoading,
+  ssr: false,
+});
+
+const LOADING_BARS = [
+  "h-80",
+  "h-64",
+  "h-60",
+  "h-72",
+  "h-48",
+  "h-96",
+  "h-32",
+  "h-56",
+];
+
+function MonthPollLoading() {
+  return (
+    <div role="status" className="ml-[40px] flex h-96 items-end sm:h-[30rem]">
+      {LOADING_BARS.map((height) => (
+        <div
+          key={height}
+          className={twMerge(
+            "mx-2 flex-1 animate-pulse bg-slate-200 dark:bg-slate-900",
+            height,
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default MonthPoll;
diff --git a/apps/web/app/opinionsundersokningar/page.tsx b/apps/web/app/opinionsundersokningar/page.tsx
@@ -1,67 +1,15 @@
 import { ChartBarIcon } from "@heroicons/react/24/solid";
-import dynamic from "next/dynamic";
-import { twMerge } from "tailwind-merge";
 
 import { ResponsiveAd } from "@components/ads";
 import { Card } from "@components/common/card";
 import Container from "@components/common/container";
 import PageTitle from "@components/common/page-title";
 import getPolls from "@lib/api/polls/get-polls";
 
-const LOADING_BARS = [
-  "h-80",
-  "h-64",
-  "h-60",
-  "h-72",
-  "h-48",
-  "h-96",
-  "h-32",
-  "h-56",
-];
-
-const BlockStatistics = dynamic(() => import("./components/block-statistics"), {
-  ssr: false,
-  loading: () => (
-    <div
-      role="status"
-      className="h-52 w-full animate-pulse bg-slate-200 dark:bg-slate-900 sm:h-80"
-    />
-  ),
-});
-const BlockBuilder = dynamic(() => import("./components//block-builder"), {
-  ssr: false,
-  loading: () => (
-    <div
-      role="status"
-      className="h-[43rem] w-full animate-pulse bg-slate-200 dark:bg-slate-900"
-    />
-  ),
-});
-const HistoricPolls = dynamic(() => import("./components//historic-polls"), {
-  ssr: false,
-  loading: () => (
-    <div
-      role="status"
-      className="h-[30rem] w-full animate-pulse bg-slate-200 dark:bg-slate-900"
-    />
-  ),
-});
-const MonthPoll = dynamic(() => import("./components//month-poll"), {
-  loading: () => (
-    <div role="status" className="ml-[40px] flex h-96 items-end sm:h-[30rem]">
-      {LOADING_BARS.map((height) => (
-        <div
-          key={height}
-          className={twMerge(
-            "mx-2 flex-1 animate-pulse bg-slate-200 dark:bg-slate-900",
-            height,
-          )}
-        />
-      ))}
-    </div>
-  ),
-  ssr: false,
-});
+import BlockBuilder from "./components/block-builder/without-ssr";
+import BlockStatistics from "./components/block-statistics/without-ssr";
+import HistoricPolls from "./components/historic-polls/without-ssr";
+import MonthPoll from "./components/month-poll/without-ssr";
 
 export const metadata = {
   title: "Opinionsundersökningar | Partiguiden",

diff --git a/apps/web/app/parti/[party]/page.tsx b/apps/web/app/parti/[party]/page.tsx
@@ -15,15 +15,17 @@ import { partyNames } from "@partiguiden/party-data/utils";
 
 import Leader from "./leader";
 
+type Params = Promise<{
+  party: Lowercase<Party>;
+}>;
+
 interface PageProps {
-  params: {
-    party: Lowercase<Party>;
-  };
+  params: Params;
 }
 
-export default async function PartyPage({
-  params: { party: partyAbbreviationLowercase },
-}: PageProps) {
+export default async function PartyPage({ params }: PageProps) {
+  const { party: partyAbbreviationLowercase } = await params;
+
   const partyAbbreviation =
     partyAbbreviationLowercase.toLocaleUpperCase() as Party;
   if (!Object.values(Party).includes(partyAbbreviation)) {
@@ -102,9 +104,9 @@ export default async function PartyPage({
   );
 }
 
-export function generateMetadata({
-  params: { party: partyAbbreviation },
-}: PageProps) {
+export async function generateMetadata({ params }: PageProps) {
+  const { party: partyAbbreviation } = await params;
+
   const party = partyAbbreviation.toUpperCase() as Party;
 
   if (!Object.values(Party).includes(party)) {