[NextJS_Pet119] Layout을 내가 원하는 곳에만 적용해보자

Layout만 설정을 해놓으면 모든 화면에 동일하게 적용되는 것을 알 수 있다.
하지만 우리는 로그인 전에는 필요가 없다
그래서 로그인 이후에만 적용해보겠다

우리가 사용할 파일은 _app.tsx 다

내가 겪은 순서대로 작성하겠다

1.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import Layout from '@/components/Layout';

function MyApp({ Component, pageProps }: AppProps) {
  if (typeof window !== 'undefined' && window.location.pathname === '/') {
    // 첫 페이지에서는 레이아웃을 표시하지 않음
    return <Component {...pageProps} />;
  }

  // 다른 페이지에서는 레이아웃을 표시함
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

이렇게 하면 제일 처음 접근한 페이지 localhost:3000에서는 동작하지 않는다
하지만 그 다음부터는 동작한다
이렇게 하니깐 signup 화면에서도 동작을 했다
나는 signup에서도 필요가 없다

2.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import Layout from '@/components/Layout';

function MyApp({ Component, pageProps }: AppProps) {
  const pathname = typeof window !== 'undefined' ? window.location.pathname : '';

  if (pathname === '/' || pathname.startsWith('/signup')) {
    // 첫 페이지 또는 /signup 또는 /signup/* 페이지에서는 레이아웃을 표시하지 않음
    return <Component {...pageProps} />;
  }

  // 다른 페이지에서는 레이아웃을 표시함
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

동작을 잠깐 하다가 에러가 발생했다...
왜????
아래는 에러 내용이다

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <div>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

이말은 서버에서 rendering한 UI와 client에서 rendering한 UI가 다르다는 말이다
Layout이 서버에서는 랜더링이 됐는데 Client에서는 랜더링이 안됐다는 것이다
이를 해결하자

3.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import Layout from '@/components/Layout';
import { useEffect, useState } from 'react';

export default function App({ Component, pageProps }: AppProps) {
  const pathname = typeof window !== 'undefined' ? window.location.pathname : '';
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => setIsMounted(true), [])

  if (pathname === '/' || pathname.startsWith('/signup')) {
    // 첫 페이지에서는 레이아웃을 표시하지 않음
    return <Component {...pageProps} />;
  }
  return (
    <>
    {isMounted &&
      <Layout>
        <Component {...pageProps} />
      </Layout>
    }
    </>
  );
}

isMounted 를 사용하여 mount가 되면 즉 client가 동작이 됐다면 Layout을 rendering 한다는 것이다
에러가 해결됐다.. 이제는 정상동작한다

기능을 하나 넣을때마다 에러가 날 찾아온다(아니.. 내가 찾아가는건가..)
그래도 해결은 되고 있다. 다음에는 만나지말자 한큐에 가자..

ref:
NextJS 공식 문서