👉 layout?

next.js는 여러 페이지에서 동일한 layout을 사용할 수 있도록 component를 구성하는 기능을 제공한다.
index, footer 등등 여러 페이지에서 동일하게 나타내는 화면 값일 때 이 layout을 사용하여 구성한다면 매 page마다 작성하지 않을 수 있어 매우 편리하다.

👉 사용하기

간단하게 layout component를 생성하고 생성한 component를 상위 컴포넌트로 적용할 컴포넌트들을 감싸주면 된다.

base.jsx 👇

import Link from "next/link"

const BaseLayout = ({ children}) => {
    return (
        // 사용할 layout의 내용을 작성해주면 된다.
      	// layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다.
        <div>
            <ul>
                <li>
                    <Link href={"/"}>Home</Link>
                </li>
            </ul>
            <ul>
                <li>
                    <Link href={"/profile"}>profile</Link>
                </li>
            </ul>
            <ul>
                <li>
                    <Link href={"/todos"}>todos</Link>
                </li>
            </ul>
        {children}
        </div>
    )
}

export default BaseLayout

_app.js 👇

import { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query'
import {ReactQueryDevtools} from "react-query/devtools"
import '../styles/globals.css'
import { AuthContext } from './shared/contexts/auth';
import BaseLayout from './shared/layouts/base';

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }) {
  // context로 사용할 것들의 기본값은 최상위에서 Local로 관리하면 된다.
  const [profile, setProfile] = useState(null)
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  return (
    <BaseLayout>
      <AuthContext.Provider
      value = {{
        profile,
        isLoggedIn,
        setIsLoggedIn,
        setProfile
      }}>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
        <ReactQueryDevtools initialIsOpen={false}/>
      </QueryClientProvider>
    </AuthContext.Provider>
  </BaseLayout>
  );
}

export default MyApp;

profile/index.js 👇

import React from "react";
import Link from "next/link";
import { useAuth } from "../shared/contexts/auth";

const ProfilePage = () => {
    const {profile, isLoggedIn} = useAuth()

    return (
        <div>
            <h1>profile</h1>
            <pre>{JSON.stringify({profile, isLoggedIn}, null, 2)}</pre>
            <Link href={"/profile/update"}>
                <button>go to profile page</button>
            </Link>
        </div>
    )

}

export default ProfilePage

사용할 layout의 component로 최상위 component를 감싸주면 다른 component에서는 코드를 작성하지 않아도 동일하게 적용되는 것을 확인할 수 있다.