Why Next.js is My Preferred Framework

app/about/page.tsx

/about

export default function AboutPage() {
  return (
    <div>
      <h1>About Me</h1>
      <p>This is my about page built with Next.js</p>
    </div>
  );
}

async function getUsers() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div>
      <h1>User List</h1>
      {users.map((user: any) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

app/api/hello/route.ts

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({
    message: "Hello from Next.js API"
  });
}

import Image from 'next/image';

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      width={300}
      height={300}
      alt="Profile"
    />
  );
}

interface User {
  name: string;
  email: string;
}

export default function UserCard({ name, email }: User) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: "Home Page",
  description: "My Next.js Website"
};