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} />;
+}