Implement simple blog with Next.js

fullstack/my-app/.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/my-app/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/my-app/CLAUDE.md

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

fullstack/my-app/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/my-app/app/api/posts/[id]/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import { posts } from "../../../data/posts";
+
+interface RouteParams {
+  params: Promise<{ id: string }>;
+}
+
+export async function GET(request: NextRequest, { params }: RouteParams) {
+  // Await the asynchronous route params container
+  const { id } = await params;
+
+  // Convert the string ID from the URL into an integer
+  const postId = parseInt(id, 10);
+
+  // Find the post matching the ID
+  const post = posts.find((p) => p.id === postId);
+
+  // If the post doesn't exist, return a 404 Custom Error JSON object
+  if (!post) {
+    return NextResponse.json(
+      { error: `Post with ID ${id} not found` },
+      { status: 404 }
+    );
+  }
+
+  // If found, return the specific post data
+  return NextResponse.json(post);
+}

fullstack/my-app/app/api/posts/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+import { posts } from "../../data/posts";
+
+export async function GET() {
+  // Returns all posts with a 200 OK status
+  return NextResponse.json(posts);
+}

fullstack/my-app/app/data/posts.ts

@@ -0,0 +1,94 @@
+export interface Post {
+  id: number;
+  title: string;
+  excerpt: string;
+  content: string;
+  date: string;
+}
+
+export const posts: Post[] = [
+  {
+    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: "Mastering the App Router",
+    excerpt: "Deep dive into layout, loading, and error handling in Next.js",
+    content: "The App Router introduces a file-system based router built on top of React Server Components, making layouts and nested routing incredibly seamless...",
+    date: "2025-04-18",
+  },
+  {
+    id: 4,
+    title: "Data Fetching Strategies",
+    excerpt: "Understand Server Components, SSR, and SSG in modern React",
+    content: "Fetching data in Next.js is as simple as making an async fetch call directly inside your React Server Component, reducing client-side bundle sizes...",
+    date: "2025-04-20",
+  },
+  {
+    id: 5,
+    title: "Optimizing Images and Fonts",
+    excerpt: "How to achieve a perfect Core Web Vitals score",
+    content: "Using the next/image and next/font components ensures layout shift is minimized and assets are automatically optimized for every device...",
+    date: "2025-04-22",
+  },
+  {
+    id: 6,
+    title: "Understanding Server Actions",
+    excerpt: "Handle form submissions and data mutations without API routes",
+    content: "Server Actions allow you to define asynchronous server functions that can be called directly from your client-side or server-side components...",
+    date: "2025-04-25",
+  },
+  {
+    id: 7,
+    title: "Middleware in Next.js",
+    excerpt: "How to run code before a request is completed",
+    content: "Middleware enables you to intercept requests and responses. It is perfect for authentication, redirecting users, or geo-targeting content...",
+    date: "2025-04-28",
+  },
+  {
+    id: 8,
+    title: "Deploying to Vercel",
+    excerpt: "Going from localhost to production in just a few clicks",
+    content: "Vercel is the creator of Next.js and provides the absolute optimal hosting environment, including global edge networks and automatic CI/CD integrations...",
+    date: "2025-05-01",
+  },
+  {
+    id: 9,
+    title: "Implementing Authentication",
+    excerpt: "Securing your Next.js application with Auth.js (NextAuth)",
+    content: "Authentication doesn't have to be a nightmare. Learn how to set up social logins, credentials provider, and protect routes using modern patterns...",
+    date: "2025-05-04",
+  },
+  {
+    id: 10,
+    title: "State Management Dilemmas",
+    excerpt: "Zustand, Redux, or Context API in React Server Components?",
+    content: "With the shift towards server-first architectures, traditional client-side global state management needs a rethink. Here is how to navigate it...",
+    date: "2025-05-07",
+  },
+  {
+    id: 11,
+    title: "SEO Best Practices",
+    excerpt: "Utilizing the Metadata API for better search engine rankings",
+    content: "Next.js has a built-in Metadata API that allows you to easily configure your page titles, descriptions, and Open Graph tags for optimal social sharing...",
+    date: "2025-05-10",
+  },
+  {
+    id: 12,
+    title: "Internationalization (i18n)",
+    excerpt: "Setting up multi-language support in the App Router",
+    content: "Routing and localized content can be tricky, but by leveraging sub-path routing and middleware, you can scale your app to a global audience...",
+    date: "2025-05-13",
+  }
+];

fullstack/my-app/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/my-app/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/my-app/app/page.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-zinc-950 transition-colors duration-300">
+      <main className="flex flex-col items-center text-center max-w-xl px-6 py-12">
+
+        <h1 className="text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-zinc-50 sm:text-5xl">
+          Welcome to My Blog Website Project
+        </h1>
+
+        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400 leading-relaxed">
+          Sharing thoughts, tutorials, and deep-dives on web development, 
+          Next.js, and modern frontend technologies.
+        </p>
+
+        <div className="mt-8">
+          <Link
+            href="/posts"
+            className="inline-flex h-12 items-center justify-center rounded-full bg-indigo-600 px-8 text-sm font-semibold text-white shadow-md shadow-indigo-600/10 transition-all hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-600/20 active:scale-95"
+          >
+            Read Blog Posts
+          </Link>
+        </div>
+
+      </main>
+    </div>
+  );
+}