Next.js là một framework mạnh mẽ để xây dựng các ứng dụng React hiệu suất cao. Một trong những tính năng của nó là khả năng tạo bố cục tùy chỉnh cho các trang của bạn, cho phép bạn tạo một thiết kế nhất quán, dễ bảo trì và cập nhật trên ứng dụng của mình.
Tạo một thành phần bố cục tùy chỉnh trong Next.JS
Trong thư mục có tên các thành phần trong dự án Next.js của bạn, hãy tạo Bố cục.jsx và thêm đoạn mã sau để tạo thành phần bố cục.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
Thành phần này nhập các thành phần Đầu trang và Chân trang và chấp nhận phần tử con làm đạo cụ. Nó làm cho những đứa trẻ ở giữa các thành phần Header và Footer. Khi bạn bọc một trang với Bố cục này, Đầu trang và Chân trang sẽ được hiển thị ở trên cùng và dưới cùng.
Sử dụng Thành phần Bố cục
Để sử dụng thành phần bố cục, hãy nhập nó vào một thành phần trang và sử dụng nó như minh họa bên dưới.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
Nó sẽ áp dụng bố cục cho trang này. Bạn có thể lặp lại quy trình này cho tất cả các trang mà bạn muốn áp dụng bố cục.
Để sử dụng bố cục trên tất cả các trang trong ứng dụng cùng một lúc, hãy nhập thành phần bố cục vào /page/_app.js tập tin và sử dụng nó như sau.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Các ví dụ được hiển thị cho đến nay sử dụng các thư mục 12 trang Next.js. Trong Next.js 13, bạn tạo bố cục trong thư mục ứng dụng (tại thời điểm viết bài, nó đang ở giai đoạn thử nghiệm).
Tạo bố cục tùy chỉnh trong thư mục ứng dụng
Thư mục ứng dụng trong Next.js 13 yêu cầu bạn tạo bố cục gốc tại cơ sở của nó. Đây là bố cục mà Next.js sẽ áp dụng cho tất cả các trang trong ứng dụng của bạn.
Để chứng minh, hãy tạo một tệp có tên bố cục.jsx và thêm mã sau đây.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Thành phần bố cục gốc chấp nhận và hiển thị những đứa trẻ. Dưới đây là một số điều bạn nên biết về bố cục gốc:
- Bạn phải đưa nó vào thư mục ứng dụng.
- Nó thay thế _app.js Và _document.js trong thư mục trang của Next.js 12.
- Bạn phải bao gồm HTML và thẻ body một cách rõ ràng.
- Nó là một thành phần máy chủ theo mặc định.
Như đã đề cập, bố cục gốc áp dụng cho tất cả các trang, vậy làm cách nào để bạn tạo bố cục tùy chỉnh cho các đoạn tuyến đường khác nhau?
Trong thư mục ứng dụng của bạn, bạn có thể xác định tuyến đường bằng cách tạo thư mục cho từng đoạn tuyến đường. Ví dụ: tạo một thư mục có tên bài viết ánh xạ tới đường dẫn URL ứng dụng/bài viết. Để thêm các đoạn tuyến đường khác, hãy tạo một thư mục con trong thư mục tuyến đường chính. Chẳng hạn, thêm một thư mục có tên xu hướng bên trong bài viết ánh xạ thư mục tới đường dẫn URL ứng dụng/bài viết/xu hướng.
Khi bạn thêm một bố cục.jsx thành phần vào thư mục tuyến đường, nó sẽ áp dụng cho tất cả các trang trong đoạn tuyến đường đó và các thư mục con của nó. Ví dụ: thêm một thành phần bố cục vào bài viết thư mục sẽ áp dụng cho tất cả các trang trong lộ trình bài viết, bao gồm cả những trang trong xu hướng thư mục con. Nếu bạn cũng thêm một thành phần bố cục trong xu hướng thì bố cục trong thư mục bài viết sẽ được lồng vào trong đó.
Ưu điểm của việc sử dụng bố cục
Next.js cho phép bạn tạo các thành phần bố cục mà bạn có thể sử dụng lại trên các trang khác nhau. Điều này cho phép bạn có giao diện nhất quán trên trang web của mình mà không cần sao chép mã trên nhiều trang. Ngoài ra, bố cục giúp bạn triển khai các thay đổi một cách nhanh chóng vì bạn không cần thực hiện thay đổi đối với từng trang.
