Implement simple blog with Next.js

fullstack/fullstack/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

fullstack/fullstack/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

fullstack/fullstack/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

fullstack/fullstack/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

fullstack/fullstack/app/api/posts/[id]/route.js

@@ -0,0 +1,13 @@
+import { posts } from "../../../../data/posts";
+import { NextResponse } from "next/server";
+
+export async function GET(request, { params }) {
+  const { id } = await params;
+  const post = posts.find((p) => p.id === Number(id));
+
+  if (!post) {
+    return NextResponse.json({ error: "Post not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(post);
+}

fullstack/fullstack/app/api/posts/route.js

@@ -0,0 +1,6 @@
+import { posts } from "../../../data/posts";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  return NextResponse.json(posts);
+}

fullstack/fullstack/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

fullstack/fullstack/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

fullstack/fullstack/app/page.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { posts } from "../data/posts";
+
+export default function Home() {
+  return (
+    <main className="max-w-3xl mx-auto px-4 py-10">
+      <h1 className="text-3xl font-bold mb-8 text-amber-300">Blog Posts</h1>
+      <div className="flex flex-col gap-6">
+        {posts.map((post) => (
+          <Link href={`/posts/${post.id}`} key={post.id}>
+            <div key={post.id} className="border border-gray-200 rounded-2xl p-6 bg-white">
+              <p className="text-xs text-gray-400 mb-1">{post.date}</p>
+              <h2 className="text-xl font-semibold text-gray-800 mb-2">{post.title}</h2>
+              <p className="text-gray-500 text-sm">{post.excerpt}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}

fullstack/fullstack/app/posts/[id]/page.jsx

@@ -0,0 +1,27 @@
+import { posts } from "../../../data/posts";
+import Link from "next/link";
+
+export default async function PostPage({ params }) {
+  const { id } = await params;
+  const post = posts.find((p) => p.id === Number(id));
+
+  if (!post) return <p>Post not found.</p>;
+
+  return (
+    <main className="max-w-2xl mx-auto px-6 py-12">
+      <Link
+        href="/"
+        className="inline-flex items-center gap-1 text-sm text-amber-300 hover:text-amber-50 mb-10"
+      >
+        ← Back to posts
+      </Link>
+
+      <p className="text-xs text-gray-400 uppercase tracking-widest mb-3">{post.date}</p>
+
+      <h1 className="text-3xl font-semibold text-white mb-3">{post.title}</h1>
+      <hr className="border-gray-200 mb-8" />
+
+      <p className="text-gray-600 text-base leading-relaxed">{post.content}</p>
+    </main>
+  );
+}

fullstack/fullstack/data/posts.js

@@ -0,0 +1,36 @@
+export const posts = [
+  {
+    id: 1,
+    title: "Getting Started with Next.js",
+    excerpt: "Learn the basics of Next.js and how to create your first app",
+    content:
+      "Next.js is a React framework that enables server-side rendering and generating static websites...",
+    date: "2025-04-15",
+  },
+  {
+    id: 2,
+    title: "Styling in Next.js",
+    excerpt: "Different ways to style your Next.js application",
+    content:
+      "There are multiple ways to style your Next.js application including CSS modules, Tailwind CSS...",
+    date: "2025-04-16",
+  },
+
+   {
+    id: 3,
+    title: "Lorem ipsum dolor sit amet",
+    excerpt: "consectetur adipiscing elit. Aenean porttitor venenatis mauris ut feugiat. ",
+    content:
+      "Sed interdum, enim a pellentesque tincidunt, nisi augue scelerisque dolor, sed posuere justo turpis non risus. Sed elementum nunc non magna volutpat facilisis. Vivamus ullamcorper eget dui et viverra. Phasellus laoreet porta orci et feugiat. Nulla sodales purus at posuere tempus. Proin mattis purus a iaculis sodales. Proin dolor lorem, placerat ut efficitur tempor, sodales eget nulla.",
+    date: "2025-04-16",
+  },
+
+   {
+    id: 4,
+    title: "In interdum justo pulvinar libero fermentum molestie.",
+    excerpt: "Phasellus fringilla mattis est, facilisis mattis diam facilisis non.",
+    content:
+      "amet justo bibendum, sit amet lacinia lorem fermentum. Sed cursus odio non nulla volutpat cursus. Etiam cursus erat in turpis facilisis pretium non ac nibh. Aenean dictum ",
+    date: "2025-04-16",
+  },
+];

fullstack/fullstack/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

fullstack/fullstack/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;