[해결 방법] Next.js에서 _document.js의 쿠키 값 참조

6490 단어 nextjs
며칠 전에 이 글을 일본어로도 썼습니다.
일본어 게시물은 here 입니다.

개요 및 참고 사항



이 문서에서는 Next.js의 _document.js에 있는 쿠키 값을 참조하는 방법을 설명합니다.
코드는 기본적으로 TypeScript로 작성되었기 때문에 파일명은 앞으로 _document.tsx가 아닌 _document.js로 작성될 수 있으나 두 경우 모두 동일한 파일이라고 가정합니다.
_document.js 에 있는 쿠키 값을 참조하고 싶은 경우는 많지 않을 수 있지만, 예를 들어 쿠키 값을 보고 <head> 태그에 있는 스크립트 로딩을 제어하고 싶은 경우가 있습니다.
(예를 들어, Google Analytics를 활성화하거나 비활성화할 수 있습니다.)

우선, 염두에 두어야 할 몇 가지 사항이 있습니다.

첫째, 우리가 여기에 쓰는 방법은 해결 방법입니다.
Next.js 쪽에서 제공하는 기능이 아닌가 싶습니다.
(Next.js의 동작을 보면 미리 예상한 방법인지 구분하기 어렵습니다.)

따라서 이 방법을 사용하지 않을 수 있다면 더 좋습니다.
좀 더 직관적인 방법이 없을까 직접 찾아보고 있습니다.

다음으로 Next.js에서 제공하는 getServerSideProps 프로세스를 실행하여 이번에 달성하고자 하는 것을 달성해야 합니다.
따라서 예를 들어 Nelify 에 정적 사이트로 사이트를 호스팅하는 경우 getServerSideProps 를 사용할 수 없으므로 이 접근 방식을 사용할 수 없습니다.
(다른 대안이 있는지 확인하지 않았습니다.)

참고(Next.js 버전 정보)



앞서 말했듯이 이것이 Next.js가 해야 할 일인지 아닌지 확신이 서지 않으므로 Next.js 버전에 따라 동작이 변경될 수 있다는 가능성을 추가하겠습니다.

이 코드는 version "9.5.5" 로 확인됩니다.

Next.js의 _document.js에 있는 쿠키 값 참조



먼저 확인을 위한 코드를 작성했습니다.
실제 동작을 보려면 이 코드를 로컬로 복제하고 실행하십시오.

Next.js sample of get cookie value at document.tsx

위의 코드는 _document.js에서 쿠키 값을 참조하는 방법을 보여줍니다.
  • 호출하려는 페이지에서 getServerSideProps 기능을 설정합니다(예: pages/index.tsx ).
  • 프로세스를 작성할 필요가 없습니다. ->getServerSideProps는 페이지를 그릴 때 한 번만 실행하고 싶기 때문에 작성되었습니다.

  • ctx.req.headers.cookie에서 _document.js의 쿠키 값 참조

    • 다음은 _document.tsx 의 쿠키 값을 실제로 참조하는 코드입니다.
    다음은 위의 저장소에서 가져온 코드입니다.

    export default class MyDocument extends Document<Props> {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);

    let hasCookie: boolean = false;

    if (ctx.req && ctx.req.headers.cookie) {
      console.log('cookie values: ', ctx.req.headers.cookie);
      hasCookie = true;
    }

    return { ...initialProps, hasCookie };
  }

  render() {
    console.log('hasCookie: ', this.props.hasCookie);

    getServerSideProps 에 _document.tsx 가 구현되어 있지 않은 것 같아서 getInitialProps 를 사용하여 쿠키 값을 한 번 얻었습니다.

    그러나 이 코드에 실제로 쿠키 값이 포함되어 있어도 ctx.req.headers.cookie 의 값이 반드시 포함되어 있지는 않습니다.getServerSideProps 호출은 pages/index.tsx 에서 작동하지만 이 코드를 주석 처리하면 위의 _document.tsx 에서 쿠키를 볼 수 없습니다.

    diff --git a/pages/index.tsx b/pages/index.tsx
index 99ea97d..23a6337 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,9 +12,11 @@ const IndexPage: React.FC = (): JSX.Element => (
   </div>
 );

+/*
 export async function getServerSideProps() {
   console.log('----------> Call getServerSideProps');
   return { props: {} };
 }
+*/


    구체적으로 ctx.req 는 undefined 가 됩니다.
    분명히 getServerSideProps가 작동한 후에야 값이 ctx.req의 _document.tsx에 저장됩니다.

    Next.js의 이 코드가 이런 종류의 동작에 도움이 될 수 있다고 생각합니다.
    (제가 틀렸다면 죄송합니다!)

    https://github.com/vercel/next.js/blob/5cab03fef0782b4ecd7dbe4ec5bd10d10554650f/packages/next/next-server/server/render.tsx#L717-L728
    getServerSideProps 실행 후 값은 ctx.req 에 입력됩니다.
    따라서 이제 서버 측에서 한 번 실행한 후 문서 측에서 해당 값(이 경우 ctx.req )을 참조해야 합니다.

    이 작업을 수행하는 더 좋은 방법을 알고 있는 사람이 있으면 의견을 말하십시오.

    읽어 주셔서 감사합니다!
    Google Data Studio에서 Google 구성원의 트위터를 시각적으로 표시
    nyoj304 에너지 절약 동태 기획

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage