Next.JS의 레이아웃

웹 개발자로서 저는 항상 완전한 웹사이트를 위해 레이아웃을 만들고 설정해야 하며 심지어 어떤 페이지에 레이아웃이 없을지 정의하거나 여러 레이아웃을 설정해야 하는 수정 패턴을 접하게 됩니다. 이 기사에서는 레이아웃에 대해 알고 있는 모든 내용과 레이아웃을 만드는 방법을 공유합니다.

웹 사이트 개발에서 레이아웃이란 무엇입니까?

레이아웃은 페이지가 변경될 때마다 모든 페이지에 표시하고 렌더링하지 않으려는 웹 사이트의 모든 항목이 될 수 있습니다. 예를 들어 "Top Navbar", "SideBar", "Footer"등. 무엇이든 될 수 있습니다.

Next.JS의 레이아웃

Next.js를 사용하면 레이아웃을 생성 및 정의하고 모든 페이지에 대해 설정할 수 있습니다.

// components/Layout.tsx

import Sidebar from "./Sidebar";

export default function Layout({ children }: any) {
  return (
    <>
      <div className="w-screen h-screen flex">
        <div className="w-[28%] border h-full">Sidebar</div>
        <main className="w-[82%] bg-[#F3F3F3] pt-6 pl-4 h-full">
          {children}
        </main>
      </div>
    </>
  );
}

위의 코드는 이제 구성 요소를 래핑하는 데 사용되는 레이아웃 구성 요소입니다.

// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout/Layout";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  return (
    <>
        <Layout>
          <Component {...pageProps} />
        </Layout>
    </>
  );
}

export default MyApp;

위의 코드를 사용하면 구성 요소 주변의 레이아웃을 마무리할 수 있으므로 모든 페이지에서 레이아웃을 볼 수 있습니다.

그러나 이제 문제는 등록 페이지 또는 로그인 페이지 등과 같은 일부 특정 페이지에서 렌더링되는 레이아웃을 어떻게 중지할 수 있는지입니다.

레이아웃 범위 제한

레이아웃 범위를 제한하려면 레이아웃을 표시하지 않으려는 페이지를 정의해야 합니다. 그런 다음 "useRouter"및 삼항 연산자를 사용하여 범위를 설정합니다.

// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout/Layout";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const withOutLayouts = ["/auth/signin", "/auth/register"];

  return (
    <>
      {withOutLayouts?.includes(router.pathname) ? (
        <Component {...pageProps} />
      ) : (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      )}
    </>
  );
}

export default MyApp;

위의 코드에서 withOutLayouts는 레이아웃을 렌더링하지 않으려는 페이지의 경로 이름입니다.


이 기사가 마음에 드셨으면 좋겠고 프로젝트에 동일하게 적용하는 데 도움이 되었으면 합니다.

이 기사를 좋아하고 피드백을 제공하고 도움이 된다면 공유하십시오.