Kết hợp layout, header, footer

Một ứng dụng web thường có những phần giao diện lặp lại giữa các trang như header, footer, hoặc sidebar/navigation. Để tránh lặp lại code và giữ giao diện nhất quán, chúng ta cần tạo một layout tổng thể và tái sử dụng nó cho nhiều trang. Trong bài học này, học viên sẽ học cách tạo layout, tích hợp vào _app.js, và xây dựng các component như Header, Footer, Navbar để dùng lại toàn cục trong ứng dụng Next.js.

Kết hợp layout, header, footer

1. Tạo layout dùng chung cho các trang

• Tạo thư mục components/, trong đó có file Layout.js:

// components/Layout.js
import Header from './Header'
import Footer from './Footer'

export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main className="container mx-auto p-4">{children}</main>
      <Footer />
    </>
  )
}

• children là nội dung riêng của từng trang được render bên trong Layout.

2. Sử dụng _app.js để bọc layout

• _app.js là entry point chính cho toàn bộ ứng dụng. Đây là nơi tốt nhất để wrap toàn bộ app bằng layout chung.

// pages/_app.js
import '../styles/globals.css'
import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

Tất cả các trang như index.js, about.js, v.v... sẽ được bọc bởi Layout này.

3. Tạo component Header, Footer, Navbar

Header.js

// components/Header.js
import Link from 'next/link'

export default function Header() {
  return (
    <header className="bg-blue-600 text-white p-4">
      <nav className="flex gap-4">
        <Link href="/">Trang chủ</Link>
        <Link href="/about">Giới thiệu</Link>
        <Link href="/contact">Liên hệ</Link>
      </nav>
    </header>
  )
}

Footer.js

// components/Footer.js
export default function Footer() {
  return (
    <footer className="bg-gray-100 text-center p-4 mt-8">
      <p>© 2025 - Công ty ABC. All rights reserved.</p>
    </footer>
  )
}

Có thể thêm component Navbar.js nếu muốn tách riêng phần điều hướng.

4. Reuse layout trong nhiều trang khác nhau

• Tất cả các trang trong thư mục pages/ như sau:

// pages/about.js
export default function About() {
  return <h1>Giới thiệu về chúng tôi</h1>
}

// pages/contact.js
export default function Contact() {
  return <h1>Liên hệ với chúng tôi</h1>

• Những trang này không cần tự import Header/Footer vì đã được bao bởi Layout trong _app.js.

Nhờ vậy, khi thay đổi giao diện layout, toàn bộ site sẽ cập nhật mà không cần sửa từng trang.

Kết luận

Trong bài học này, học viên đã nắm được cách xây dựng một layout tổng thể để tái sử dụng trong toàn bộ ứng dụng Next.js:

• Tạo layout chung có chứa Header, Footer
• Bọc layout trong _app.js để áp dụng cho toàn bộ trang
• Tạo và quản lý các thành phần giao diện tái sử dụng (component-based UI)
• Giữ cho code sạch, dễ quản lý, đồng thời tạo trải nghiệm người dùng nhất quán

Việc tổ chức layout hợp lý là tiền đề để mở rộng ứng dụng dễ dàng hơn trong các dự án thực tế.