Add slug for blog

app/news/[slug]/page.jsx

@@ -0,0 +1,30 @@
+import {notFound, redirect} from "next/navigation";
+import {news} from "../data.js";
+
+function toKebabCase(str) {
+  return str.toLowerCase().replace(/ /g, "-");
+}
+
+function slugof(news) {
+  return news.slug || toKebabCase(news.title);
+}
+
+export async function generateStaticParams() {
+  return news.map((news) => ({slug: slugof(news)}));
+}
+
+export async function generateMetadata({params}) {
+  const {slug} = await params;
+  const blog = news.find((news) => slugof(news) === slug);
+  if (!blog) notFound();
+  return {
+    title: `${blog.title} | Recho`,
+  };
+}
+
+export default async function Page({params}) {
+  const {slug} = await params;
+  const blog = news.find((news) => slugof(news) === slug);
+  if (!blog) notFound();
+  redirect(blog.link);
+}

app/news/data.js

@@ -0,0 +1,11 @@
+export const news = [
+  {
+    title: "A Lighter Way to Code with Creativity",
+    publishedAt: "2025-10-01",
+    summary: "Introducing Recho: a light learning and exploration environment.",
+    link: "https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f",
+    author: "Bairui SU",
+    image: "a-ligter-way-to-code-with-creativity.png",
+    slug: "hello-world",
+  },
+];

app/news/page.jsx

@@ -1,15 +1,5 @@
 import {cn} from "../cn.js";
-
-const news = [
-  {
-    title: "A Lighter Way to Code with Creativity",
-    publishedAt: "2025-10-01",
-    summary: "Introducing Recho: a light learning and exploration environment.",
-    link: "https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f",
-    author: "Bairui SU",
-    image: "a-ligter-way-to-code-with-creativity.png",
-  },
-];
+import {news} from "./data.js";
 
 export default function News() {
   return (