Next.js React Framework SSR · SSG · API Routes · File-based Routing · Image Optimization

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query; // URL ውስጥ ያለ [id]

  return (
    <div>
      <h1>Blog Post #{id}</h1>
      {/* /blog/5 → id = "5" */}
      {/* /blog/hello → id = "hello" */}
    </div>
  );
}

// ── SSR — ሁሉም request ላይ server ይሰራዋል ──────
export async function getServerSideProps(context) {
  const res  = await fetch(`https://api.ethiocode.com/posts`);
  const data = await res.json();

  return { props: { posts: data } };
  // ← ሁሌ fresh data ✅ | ትንሽ 느린 ⚠️
}

// ── SSG — Build time አንድ ጊዜ ብቻ ──────────────
export async function getStaticProps() {
  const res  = await fetch('https://api.ethiocode.com/courses');
  const data = await res.json();

  return {
    props: { courses: data },
    revalidate: 3600, // ISR — 1 ሰዓት ይጠብቅ ዘምን
  };
}

// ── Page Component ─────────────────────────────
export default function Home({ posts, courses }) {
  return (
    <div>
      {posts.map(p => (
        <PostCard key={p.id} post={p} />
      ))}
    </div>
  );
}

// pages/api/users.js → yoursite.com/api/users
export default function handler(req, res) {

  if (req.method === 'GET') {
    // GET /api/users — ሁሉም users ስጥ
    res.status(200).json({
      users: [
        { id: 1, name: 'Abel',  role: 'admin' },
        { id: 2, name: 'Sara',  role: 'user'  },
      ]
    });
  }

  else if (req.method === 'POST') {
    // POST /api/users — አዲስ user ፍጠር
    const { name, email } = req.body;
    // DB save logic here...
    res.status(201).json({ message: 'Created!', name });
  }

  else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

// React ውስጥ ጠቅ ለማድረግ:
// fetch('/api/users') — Same domain! CORS ችግር የለም!