Trong quá trình xây dựng ứng dụng, đôi khi bạn sẽ gặp trường hợp các trang web sử dụng các Component tương tự nhau như “Header”, “Sidebar”, “Footer”, v/v. Đối với các ứng dụng lớn với codebase lớn, việc sử dụng lặp lại các component này sẽ tạo thêm sự phức tạp cho source-code, khiến cho việc vận hành và chỉnh sửa khó hơn rất nhiều. Đối với các trường hợp này, giải pháp tốt nhất là sử dụng các Layout Component. Các Component này sẽ chứa tất cả các Component chung cho các trang khác nhau.

Tạo Layout Component trong Next.js

Thông thường, layout component sẽ được đặt trong folder ./components/layouts đối với các ứng dụng Next.js. Trong thư mục này, ta tạo file DefaultLayout.jsx với nội dung như sau:

// ./components/layouts/DefaultLayout.js
function DefaultLayout(props)  {
    return (
        <div className={'default-layout'}>
            <div>
                {props.children}
            </div>
        </div>
    )
}

export default DefaultLayout

Với các trang cần sử dụng DafaultLayout, ta sẽ import Layout Component này vào, và đặt nội dung của trang vào trong <DefaultLayout/>. Tạo file ./pages/hello-world.js:

// ./pages/hello-world.js
import Head from 'next/head'
import DefaultLayout from "../components/layouts/DefaultLayout";

export default function HelloWorld(props) {
  return (
      <DefaultLayout>
          <div className="container">
              <Head>
                  <title>Create Next App</title>
                  <meta name="description" content="Generated by create next app" />
                  <link rel="icon" href="/favicon.ico" />
              </Head>

              <main>
                  <p>Hello World</p>
              </main>

          </div>
     </DefaultLayout>
  )
}

Tất cả nội dung bên trong Component <DefaultLayout/> sẽ được truyền vào props.children của component này.

Thêm Header cho trang

Bây giờ, ta sẽ tạo Header dùng cho <DefaultLayout/>. Tạo file ./components/common/Header.js:

import styles from "./Header.module.css"

export function Header() {
    return (
        <div className={styles.header}>
            <p className='site-name'>My Website</p>
        </div>
    )
}

Và một ít css cho Header trông đẹp mắt hơn:


.header {
    width: 100%;
    height: 70px;
    background-color: blue;
    color: white;
    font-weight: bold;
}

Import Header vào <DefaultLayout/>:

import {Header} from "../common/Header";

function DefaultLayout(props)  {
    return (
        <div className={'default-layout'}>
            <Header />
            <div>
                {props.children}
            </div>
        </div>
    )
}

export default DefaultLayout

Sau khi đã tạo xong Header và sử dụng trong Default Layout, ta vào đường link http://localhost:3000/hello-world để xem kết quả:

Tạm kết

Bạn có thể tạo thêm các Component dùng chung như Footer hoặc Sidebar và sử dụng trong các Layout Component mà không phải lặp lại nhiều lần. Việc này sẽ giúp cho code của bạn đơn giản và hiệu quả hơn.