9 điều cơ bản đầu tiên khi đến với Next.js

/app
├── page.js          → example.com/
├── /about
│   └── page.js      → example.com/about
└── /blog
    ├── page.js      → example.com/blog
    └── /post-1
        └── page.js  → example.com/blog/post-1

/app
├── layout.js        ← app shell (master layout, bao toàn bộ app)
├── page.js
└── /about
    ├── layout.js    ← nested layout, chỉ áp dụng cho /about
    └── page.js

import Link from 'next/link';

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

/app
└── /blog
    ├── page.js
    └── /[slug]
        └── page.js   → example.com/blog/:slug

export default function BlogDetail({ params }) {
  return <p>{params.slug}</p>;
}

/app
├── layout.js
└── page.js

/components       ← đặt ở ngoài /app
└── header.js

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

/components
├── header.js
└── header.module.css

import classes from '@/components/header.module.css';

<Link className={classes.logo} href="/">Home</Link>

import Image from 'next/image';
import logo from '@/assets/logo.png';

<Image src={logo} priority />

'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';

import burgerImg from '@/assets/burger.jpg';
import curryImg from '@/assets/curry.jpg';
import dumplingsImg from '@/assets/dumplings.jpg';

const images = [
  { image: burgerImg, alt: 'A delicious, juicy burger' },
  { image: curryImg, alt: 'A delicious, spicy curry' },
  { image: dumplingsImg, alt: 'Steamed dumplings' },
];

export default function ImageSlideshow() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImageIndex((prevIndex) =>
        prevIndex < images.length - 1 ? prevIndex + 1 : 0
      );
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className={classes.slideshow}>
      {images.map((image, index) => (
        <Image
          key={index}
          src={image.image}
          className={index === currentImageIndex ? classes.active : ''}
          alt={image.alt}
        />
      ))}
    </div>
  );
}

You're importing a component that needs useState. 
This only works in a Client Component...

// nav-link.js — client component nhỏ gọn
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function NavLink({ href, children }) {
  const path = usePathname();
  return (
    <Link href={href} className={path.startsWith(href) ? 'active' : ''}>
      {children}
    </Link>
  );
}

// header.js — vẫn là Server Component
// nếu đặt 'use client' ở header để sử dụng được 'usePathname', sẽ biến header thành client-component
import NavLink from './nav-link';

export default function Header() {
  return (
    <nav>
      <NavLink href="/about">About</NavLink>
      <NavLink href="/blog">Blog</NavLink>
    </nav>
  );
}