change the npm to yarn and update the json

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

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function NewsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <Link href="/" className="text-blue-500 hover:underline mb-4 inline-block">
+        &larr; Back to News List
+      </Link>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { fetchNewsData } from "../../../lib/fetchNewsData";
+import NewsDetail from "../../../components/NewsDetail";
+
+
+export default async function NewsPage({ params }: { params: { id: string } }) {
+  const newsData = await fetchNewsData(params.id);
+
+  if (!newsData) {
+    return <div>News not found</div>;
+  }
+
+  return <NewsDetail news={newsData} />;
+}

ui/app/news/layout.tsx

@@ -0,0 +1,12 @@
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "News - Perplexica",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;

ui/app/news/page.tsx

@@ -0,0 +1,5 @@
+import NewsPage from "@/components/NewsPage";
+
+export default function Page() {
+  return <NewsPage />;
+}