Skip to content

Dashboard

Nextjs: Dynamic Layout

Created by Admin

Xin chào mọi người hôm nay mình xin chia sẻ một tính năng của Nextjs đó Dynamic Layout. Vậy nó là gì? khi nào cần sử dụng mình cùng tìm hiểu nhé!

Bạn sẽ học được gì ?

  1. Dynamic layout là gì?
  2. Khi nào sử dụng nó.
  3. Triển khai trong Nextjs như thế nào?

Dynamic layout là gì?

Dynamic có nghĩa là động thì mình tạm dịch ra là "Layout động", thì theo ý nghĩa của nó thì Layout có thể tùy biến, thay đổi theo mong muốn của mình. Để dể hiểu hơn thì bạn có thể so sánh với Web tĩnh và động, tĩnh là khi dữ liệu của một trang web không bao giờ thay đổi, còn động thì dữ liệu có thể thay đổi, rồi cũng dể hiểu phải hông ạ!

Khi nào sử dụng nó

Thì khi nào bạn nên sử dụng nó? Thì trong quá trình code bạn để ý trang web của mình nó thường sẽ gồm 3 phần chính đó là: Header, Body, Footer. Thường thường Header và Footer sẽ là cố định trong tất cả các trang, chỉ phần Body là thay đổi, vậy bạn chỉ cần tạo một Component DefaultLayout và import Header Footer vào. Nhưng sẽ có những trang không cần Header Footer thì mình sẽ làm như thế nào?

Không biết các bạn có giống mình không, lúc trước gặp trường hợp này thì mình tạo một biến gồm các URLs cần loại bỏ Header Footer và check url xem nếu tồn tại thì ẩn đi, kiểu như vậy:

const URLs = ['/login', '/register'];

function Layout() {
  return (
    <div>
      {!URLs.includes(getPathname()) && <Header />}
      <Body />
      {!URLs.includes(getPathname()) && <Footer />}
    </div>
  )
}

Hoặc là import vào mỗi trang luôn, có nghĩa là trang nào mình cũng Header Footer vào, cách này thì rất là cùi luôn, thật ra thì không ai làm như vậy cả.

Vậy tóm lại là khi có nhiều trang có giao diện khác nhau thì bạn sẽ cần phải sử dụng Dynamic Layout. Và sử dụng nó như thể nào trong Nextjs thì mình cùng tìm hiểu tiếp nhé.

Triển khai trong Nextjs như thế nào?

Mình có search thử trong Docs của Nextjs mà có vẻ không ra. Nên phải search từ nguồn khác.

Triển khai với Nextjs

Mình sẽ sử dụng dự án mình đang làm để ví dụ luôn nhé! Tạo file DefaultLayout.tsx và EmptyLayout.tsx trong Components/Layouts/DefaultLayout.tsx:

import { ReactNode } from 'react';

import { IUsers } from '@/typings/users';
import Navbar from '@/components/Navbar';

function DefaultLayout({
  children,
  users,
}: {
  children: ReactNode;
  users: IUsers[];
}) {
  return (
    <main>
      <div className="xv-profile">
        <Navbar users={users} />
        {children}
      </div>
    </main>
  );
}

export default DefaultLayout;

import { ReactNode } from 'react';

function EmptyLayout({ children }: { children: ReactNode }) {
  return (
    <main>
      <div className="xv-profile">{children}</div>
    </main>
  );
}

export default EmptyLayout;

Vào _app.tsx:

interface Props extends AppProps {
  users: IUsers[];
  Component: ComponentTypes;
}

function MyApp({ Component, pageProps, users }: Props) {
  const Layout = Component.Layout || DefaultLayout; // Check xem Component có sử dụng layout khác không, nếu không thì để default

  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
        <CircleDecor />
      </ThemeProvider>
    </QueryClientProvider>
  );
}

Vậy là Ok rồi, giờ chỉ cần vào setting sử dụng Layout nào thôi

function Login() {
  return (
    <S.Wrapper>
      <S.Container>
        <S.FormGroup>
          <Input
            name="username"
            onChange={handleChange}
            placeholder="username/email"
          />
        </S.FormGroup>
        <S.FormGroup>
          <Input
            name="password"
            placeholder="password"
            onChange={handleChange}
          />
        </S.FormGroup>
        <Button className="primary" onClick={handleSubmit}>
          Login
        </Button>
      </S.Container>
    </S.Wrapper>
  );
}

Login.Layout = EmptyLayout; // Chỉ cần làm như vậy thôi nè

export default Login;

Hồi kết

Nhìn thì cũng đơn giản phải hông ạ, tuy nhiên những bạn mới học Nextjs thì sẽ không biết về cái này trong Docs của nó cũng không có nên hy vọng sẽ giúp các bạn hiểu rõ hơn, cảm ơn rất nhiều!
Source: https://viblo.asia/p/nextjs-dynamic-layout-3P0lPG3bZox
nextjs