Cách tạo bố cục tùy chỉnh trong Next.JS

Chí Vỹ

Tránh lặp code bằng cách dùng các bố cục tùy chỉnh trong Next.js vô cùng dễ dàng. Dưới đây là chi tiết cách tạo bố cục tùy chỉnh trong Next.js.

Lập trình cùng Next.js

Next.js là một framework mạnh mẽ cho việc xây dựng các ứng dụng React hiệu suất cao. Một trong số tính năng của nó là tạo các bố cục tùy chỉnh cho trang web, giúp bạn thiết kế nhất quán. Từ đó, việc cập nhật trên khắp ứng dụng cũng dễ dàng hơn.

Tạo thành phần bố cục tùy biến trong Next.js

Trong thư mục mang tên components ở dự án Next.js, tạo Layout.jsx và thêm code 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 Header và Footer, đồng thời chấp nhận children làm thuôc tính. Nó đặt children nằm giữa Header và Footer. Khi bạn đóng gói một trang bằng Layout này, Header và Footer sẽ hiện ở trên và phía dưới cùng.

Dùng thành phần Layout

Để dùng thành phần bố cục, nhập nó vào một thành phần trang và sử dụng như bên dưới.

import Layout from '../components/Layout'
const Page = () => (
  <Layout>
    <h1>Home</h1>
  </Layout>
)
export default Page

Bạn vừa áp dụng bố cục đó cho trang mong muốn. Bạn có thể lặp lại quá trình này cho tất cả các trang cần thiết.

Để dùng chung bố cục trên toàn bộ trang trong các ứng dụng cùng lúc, nhập thành phần bố cục vào file /page/_app.js và dùng nó như sau:

import Layout from "../components/layout";
function MyApp({ Component, pageProps }) { 
   return ( 
       <Layout> 
           <Component {...pageProps} /> 
       </Layout> 
    );
}

Các ví dụ minh họa đều dùng các thư mục trang Next.js 12. Trong Next.js 13, bạn tạo bố cục ở thư mục app.

Tạo bố cục tùy chỉnh trong thư mục ứng dụng

Thư mục app trong Next.js 13 yêu cầu bạn tạo một bố cục gốc làm cơ sở. Đây là bố cục mà Next.js sẽ áp dụng cho tất cả trang của ứng dụng.

Để chứng minh, tạo một file mang tên layout.jsx và thêm code sau:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Thành phần bố cục gốc chấp chận và hiển thị phần tử children. Bên dưới là một số điều bạn cần biết về bố cục gốc:

Phải bao gồm nó trong thư mục app.
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ặc định nó là một thành phần server.

Như đã đề cập, bố cục gốc áp dụng cho tất cả các trang, vì thế, làm thế nào tạo bố cục tùy chỉnh cho các phân đoạn lộ trình khác nhau?

Trong thư mục ứng dụng, bạn có thể xác định một lộ trình 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 mang tên article dẫn tới URL: app/articles. Để thêm các đoạn lộ trình khác, tạo thư mục phụ trong thư mục chính. Ví dụ, thêm một thư mục trending vào bên trong articles dẫn tới URL: app/articles/trending.

Khi bạn thêm thành phần layout.js vào thư mục route, nó sẽ áp dụng cho tất cả các trang trong phân đoạn route và thư mục phụ của nó. Ví dụ, thêm một thành phần bố cục vào thư mục articles sẽ áp dụng cho tất cả các trang trong route articles, bao gồm chúng trong thư mục phụ trending. Nếu bạn cũng thêm một thành phần bố cục trong thư mục trending, bố cục ở thư mục articles sẽ được lồng vào bên trong nó.

Trên đây là cách tạo bố cục tùy chỉnh trong Next.js. Hi vọng bài viết hữu ích với các bạn.

Thứ Tư, 15/02/2023 16:57

3 ★ 1 👨 535

#Next.js