// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// Dynamic route: pages/posts/[id].js
import { useRouter } from 'next/router';
export default function Post() {
  const { query } = useRouter();
  return <div>Post ID: {query.id}</div>;
}

// Static Generation
export async function getStaticProps() {
  return { props: { data: 'value' } };
}

// Dynamic Paths
export async function getStaticPaths() {
  return { paths: [{ params: { id: '1' } }], fallback: false };
}

// Server-side Rendering
export async function getServerSideProps() {
  return { props: { data: 'value' } };
}

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

// CSS Modules
import styles from './Home.module.css';
<div className={styles.header}>Header</div>

// Global CSS: styles/globals.css
// Add import in pages/_app.js
import '../styles/globals.css';

import Link from 'next/link';

<Link href="/about">
  <a>About</a>
</Link>

import Image from 'next/image';

<Image src="/logo.png" width={100} height={100} alt="Logo" />