쿠...sal: [컴] nextjs commerce 의 Layout 설정

nextjs commerce 의 Layout 설정

_app.tsx 는 매번 page 가 rendering 될 때 가장 먼저 호출되는 file 이다.

여기서 (Component as any).Layout 이렇게 Layout 을 호출하기 때문에, 현재 각 pages/*.tsx 에 Layout property 를 붙인다.

// pages/_app.tsx

...
import type { AppProps } from 'next/app'
...
export default function MyApp({ Component, pageProps }: AppProps) {
  const Layout = (Component as any).Layout || Noop

  useEffect(() => {
    document.body.classList?.remove('loading')
  }, [])

  return (
    <>
      <Head />
      <ManagedUIContext>
        <Layout pageProps={pageProps}>
          <Component {...pageProps} />
        </Layout>
      </ManagedUIContext>
    </>
  )
}

// pages/index.tsx
...
import { Layout } from '@components/common'
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'

export async function getStaticProps({
  preview,
  locale,
  locales,
}: GetStaticPropsContext) {
  ...
  return {
    props: {
      products,
      categories,
      brands,
      pages,
    },
    revalidate: 60,
  }
}

export default function Home({
  products,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  debugger
  return (
    <>
      ...
    </>
  )
}

Home.Layout = Layout

쿠...sal

[컴] nextjs commerce 의 Layout 설정

nextjs commerce 의 Layout 설정

See Also

댓글 없음:

댓글 쓰기