add a constant file to read the env variables

ui/app/news/[id]/layout.tsx

@@ -1,17 +1,15 @@
-import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
+import { Metadata } from "next";
+import React from "react";
+import { ENV, assertEnvVariables } from "../../../lib/constants";
 
-export default function NewsDetailLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="max-w-4xl mx-auto p-4">
-      <Link
-        href="/news"
-        className="inline-flex items-center mb-4 text-sm font-medium text-black dark:text-white hover:underline"
-      >
-        <ArrowLeft className="w-4 h-4 mr-1" />
-        Back
-      </Link>
-      {children}
-    </div>
-  );
-}
+export const metadata: Metadata = {
+  title: "News - Perplexica",
+};
+
+assertEnvVariables(ENV);
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;

ui/app/news/[id]/page.tsx

@@ -1,7 +1,8 @@
 import NewsDetail from "../../../components/NewsDetail";
+import { VALIDATED_ENV } from "../../../lib/constants";
 
 async function getNewsData(id: string) {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/news/${id}`, { next: { revalidate: 60 } });
+  const res = await fetch(`${VALIDATED_ENV.API_URL}/news/${id}`, { next: { revalidate: 60 } });
   if (!res.ok) {
     throw new Error("Failed to fetch news");
   }