본문 바로가기

너와 나의 프로그래밍

너와 나의 프로그래밍

  • 분류 전체보기 (112)
    • Back-End (13)
      • Java Example (5)
      • Spring Framework (8)
    • Front-End (68)
      • TypeScript (6)
      • JavaScript (14)
      • Next.js & React.js (30)
      • Vue.js (8)
      • HTML5 & CSS3 (4)
      • JQuery (6)
    • Etc. (31)
      • Development Etc. (17)
      • Yoon's Life (14)
Guestbook
Today
Total
관리 메뉴
  • 글쓰기
  • 방명록
  • RSS
  • 관리

목록next.js nestedlayout (1)

너와 나의 프로그래밍

Next.js - NestedLayout 사용 방법 (Pages Router)

NestedLayout?🤔 거의 모든 웹 어플리케이션에서 SideBar나 NavBar를 구현해 Layout은 그대로 두되 안에있는 페이지만 바꾸는 SPA 방식을 많이 채택한다. React.js에서는 SPA 방식의 구현이 당연하지만 Next.js는 SSR의 렌더링 방식이라 조금 다른데 이걸 Next.js도 알고 있는지 여러가지 방법을 제시해주고 공식문서에도 아주 잘 설명이 되어있다. 하지만 그것보다 더 간단하게 기존 13버전 위/아래 버전의 두가지 방법을 소개해볼까 한다. Next.js 13 ↓😳 "getLayout"을 사용하는 방법이 가장 편하고 깔끔했다. 1, _app.jsx(tsx)에 getLayout을 적용하자. 2. 실제 사용할 Layout Component를 구성. 3. NestedLayout ..

Front-End/Next.js & React.js 2024. 2. 5. 22:30
이전 Prev 1 Next 다음

Blog is powered by kakao / Designed by Tistory

티스토리툴바