반응형 getLayout2 Next.js에서 공통 레이아웃 설정하기 헤더나 푸터 같은 자주 재사용되는 컴포넌트들은 공통 레이아웃으로 한번에 선언하는 것이 좋다. Layout이 1개일때 header와 footer는 알아서 만들고 우선 layout.tsx에 다음과 같이 설정하자. // layout.tsx import Header from "./Header"; import Footer from "./Footer"; export default function Layout({ children }: any) { return ( Welcome to June's blog ); }; //다음 getLayout을 추가 HomePage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default H.. 2023. 1. 13. Next.js - getLayout : 여러개의 레이아웃을 사용할때 공통 레이아웃이 한개일때 하나의 공통된 Layout을 쓰는 경우는 pages/_app.js에 공통 레이아웃 컴포넌트를 작성하였다. 공통 레이아웃이 여러개일때 그렇다면 1페이지에서는 1번 헤더 2페이지에서는 2번 헤더 3페이지에서는 3번 헤더 이런식으로 활용하고 싶다면 어떻게 해야 할까?? Page.getLayout이라는 함수가 있다 이런식으로 pages/csr.js에 getLayout함수를 작성해주고 import { useEffect, useState } from "react"; import Layout from "../components/Layout"; import SubLayout from "../components/SubLayout"; export default function CSR() { ..생.. 2022. 9. 14. 이전 1 다음 반응형