Merge pull request #62 from ruchernchong/61-add-pages-revalidation

61 add pages revalidation

.env.example

@@ -2,3 +2,4 @@ NEXT_PUBLIC_SITE_URL=
 NEXT_PUBLIC_API_URL=
 NEXT_PUBLIC_GA_MEASUREMENT_ID=
 NEXT_PUBLIC_FEATURE_FLAG_RELEASED=
+NEXT_PUBLIC_REVALIDATE_TOKEN=

app/api/revalidate/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from "next/server";
+import { revalidateTag } from "next/cache";
+
+export const GET = (req: NextRequest) => {
+  const secret = req.nextUrl.searchParams.get("secret");
+  const tags = req.nextUrl.searchParams.get("tags") as string;
+
+  if (secret !== process.env.NEXT_PUBLIC_REVALIDATE_TOKEN) {
+    return NextResponse.json({ message: "Invalid token!" }, { status: 401 });
+  }
+
+  revalidateTag(tags);
+  return NextResponse.json({ revalidated: true, now: Date.now() });
+};

app/cars/[type]/page.tsx

@@ -56,10 +56,14 @@ export const generateStaticParams = () =>
 const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
   const { type } = params;
 
-  const cars = await fetchApi<Car[]>(`${API_URL}/cars/${type}`);
+  const cars = await fetchApi<Car[]>(`${API_URL}/cars/${type}`, {
+    next: { tags: ["cars"] },
+  });
   const [months, latestMonth] = await Promise.all([
-    fetchApi<Month[]>(`${API_URL}/months`),
-    fetchApi<LatestMonth>(`${API_URL}/months/latest`),
+    fetchApi<Month[]>(`${API_URL}/months`, { next: { tags: ["cars"] } }),
+    fetchApi<LatestMonth>(`${API_URL}/months/latest`, {
+      next: { tags: ["cars"] },
+    }),
   ]);
 
   const totals = new Map();

app/coe/page.tsx

@@ -18,10 +18,15 @@ import { UnreleasedFeature } from "@/components/UnreleasedFeature";
 export const metadata: Metadata = { alternates: { canonical: "/coe" } };
 
 const COEPage = async () => {
-  const fetchHistoricalResult = fetchApi<COEResult[]>(`${API_URL}/coe`);
-  const fetchMonthlyResult = fetchApi<COEResult[]>(`${API_URL}/coe/latest`);
+  const fetchHistoricalResult = fetchApi<COEResult[]>(`${API_URL}/coe`, {
+    next: { tags: ["coe"] },
+  });
+  const fetchMonthlyResult = fetchApi<COEResult[]>(`${API_URL}/coe/latest`, {
+    next: { tags: ["coe"] },
+  });
   const fetchLatestMonth = fetchApi<Record<string, string>>(
     `${API_URL}/months/latest`,
+    { next: { tags: ["coe"] } },
   );
 
   const [historicalResults, monthlyResults, latestMonth] = await Promise.all([

app/coe/prices/page.tsx

@@ -8,6 +8,7 @@ import Typography from "@/components/Typography";
 const COEPricesPage = async () => {
   const historicalResult: COEResult[] = await fetchApi<COEResult[]>(
     `${API_URL}/coe?orderBy=asc`,
+    { next: { tags: ["coe"] } },
   );
 
   const groupedData: COEBiddingResult[] = historicalResult.reduce(

app/make/[make]/page.tsx

@@ -35,7 +35,9 @@ export const generateMetadata = async ({ params, searchParams }: Props) => {
 };
 
 export const generateStaticParams = async () => {
-  const makes = await fetchApi<string[]>(`${API_URL}/make`);
+  const makes = await fetchApi<string[]>(`${API_URL}/make`, {
+    next: { tags: ["cars"] },
+  });
   return makes.map((make) => ({ make }));
 };
 

utils/fetchApi.ts

@@ -1,11 +1,7 @@
-interface Options extends RequestInit {}
-
 export const fetchApi = async <T>(
   url: string,
-  options: Options = {},
+  options: RequestInit = {},
 ): Promise<T> => {
-  options = { cache: "no-store", ...options };
-
   const response = await fetch(url, options);
 
   if (!response.ok) {