Chào bạn, trong bài viết này chúng ta sẽ tập trung vào cách tạo một thành phần bố cục (layout) trong Next.js với Bootstrap 5. Việc sử dụng một thành phần bố cục giúp chúng ta tạo ra một giao diện đồng nhất trên các trang của ứng dụng web của mình. Điều này giúp cho ứng dụng của chúng ta trông chuyên nghiệp và dễ dàng sử dụng hơn. Bây giờ chúng ta hãy bắt đầu!
(Để xem bài trước: Next.js bài 3: Sử dụng Redux với Next.js để quản lý trạng thái ứng dụng)
Cài đặt Bootstrap 5
Để bắt đầu, chúng ta cần cài đặt Bootstrap 5 vào ứng dụng Next.js của mình. Bạn có thể cài đặt Bootstrap 5 bằng cách sử dụng npm hoặc yarn, bằng cách chạy lệnh sau trong terminal:
npm install bootstraphoặc
yarn add bootstrapTạo component Layout
Bây giờ chúng ta sẽ tạo một component Layout để sử dụng trong toàn bộ ứng dụng của mình. Trong thư mục components, tạo một file mới có tên Layout.js. Trong file này, chúng ta sẽ import Bootstrap và tạo một component Layout sử dụng Bootstrap.
import Head from "next/head";
import { Container } from "react-bootstrap";
const Layout = ({ children }) => {
return (
<>
<Head>
<title>Next.js Course 101</title>
<meta name="description" content="Learn Next.js" />
</Head>
<Container>{children}</Container>
</>
);
};
export default Layout;Như bạn có thể thấy, chúng ta đã sử dụng thẻ <Head> để thêm title và mô tả cho trang của chúng ta. Chúng ta cũng đã sử dụng.<Container> của Bootstrap để giữ cho nội dung của chúng ta được căn giữa và trông chuyên nghiệp hơn.
Sử dụng Layout trong ứng dụng của chúng ta
Bây giờ chúng ta đã tạo thành công một component Layout, tiếp theo chúng ta sẽ sử dụng nó trong ứng dụng của chúng ta. Để sử dụng Layout, chúng ta chỉ cần import nó vào trong các trang của ứng dụng của chúng ta. Dưới đây là ví dụ cách sử dụng Layout trong trang Home của chúng ta.
Mở file pages/index.js và sửa lại mã nguồn như sau:
import Layout from '../components/Layout';
export default function Home() {
return (
<Layout>
<div className="container">
<h1>Trang chủ</h1>
<p>Chào mừng bạn đến với Next.js Course 101</p>
</div>
</Layout>
);
}Bây giờ chúng ta đã bọc phần nội dung của trang Home trong layout component. Chúng ta cũng có thể sử dụng layout component cho các trang khác trong ứng dụng của chúng ta. Hãy tạo một trang About và sử dụng layout component cho trang đó.
Tạo một file mới tên là about.js trong thư mục pages với nội dung như sau:
import Layout from '../components/Layout';
export default function About() {
return (
<Layout>
<div className="container">
<h1>Giới thiệu</h1>
<p>Chúng tôi là nhóm phát triển Next.js Course 101</p>
</div>
</Layout>
);
}Trong đoạn mã trên, chúng ta đã sử dụng layout component để bọc phần nội dung của trang About.
Bây giờ, hãy chạy ứng dụng của chúng ta và kiểm tra trang Home và trang About. Bạn sẽ thấy rằng cả hai trang đều có cùng một layout, tạo ra sự thống nhất trong giao diện người dùng của ứng dụng của chúng ta.
Đến đây, chúng ta đã hoàn thành bài viết về tạo một thành phần bố cục trong Next.js với Bootstrap 5. Như vậy, chúng ta đã học cách tạo ra một layout component và sử dụng nó để bọc phần nội dung của các trang trong ứng dụng của chúng ta. Chúng ta cũng đã học cách sử dụng Bootstrap 5 để tạo ra giao diện người dùng hấp dẫn và dễ sử dụng.