inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

React로 NodeBird SNS 만들기

7-14. react-helmet SSR

renderPage

529

아따마

작성한 질문수 18

0

const page = context.renderPage((App) => (props) => <App {...props} />);

 return { ...page, helmet: Helmet.renderStatic() };

추가후 로그인 하면 페이지가 넘어가질 않습니다.

이상태가 되어 버립니다.

javascript react

답변 15

1

제로초(조현영)

방법은 다 맞는데요. 어딘가에서 에러가 있거나 설정 오타가 있는 것 같습니다. 오타 찾는 게 매우 힘드니 프로젝트 다시 만드시면서 찾아보시는 게 좋습니다.

1

제로초(조현영)

아뇨 저거면 충분합니다. 빌드를 다시 해보시고 엘레먼트 탭에서 클래스가 제대로 들어갔는지 확인해보세요.

1

제로초(조현영)

웹팩 설정에서 css 파일 처리를 위한 관련 로더를 추가해주셔야 합니다. css-loader를 추가하시면 됩니다.

1

제로초(조현영)

이 부분은 next9 버전을 쓰신다면 다른 부분 코드와 충돌이 나기때문에 제가 정확하게 원인을 파악하기 좀 어렵습니다.

1

제로초(조현영)

위 메시지는 에러가 아니라 경고입니다. 무시하셔도 됩니다. 페이지 넘어가지 않는 것은 다른 문제를 찾아보셔야 합니다. 저 코드가 없다면 원래 페이지가 동작하셨던 건가요? 아니면 document.js가 없었을 때 동작하셨던 건가요?

1

제로초(조현영)

네네 그냥 지워주세요

1

제로초(조현영)

_document.js 말씀하시는 거죠? 이 부분은 버전 문제일 수 있습니다. next.js 버전이 올라가서 코드가 바뀌었습니다. 나중에 styled-components까지 같이 쓰시면 저는 코드가 이렇습니다.

import React from 'react';
import Helmet from 'react-helmet';
import Document, { Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  static async getInitialProps(context) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = context.renderPage;

    try {
      context.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
      });
      const initialProps = await Document.getInitialProps(context);
      return {
        ...initialProps,
        helmet: Helmet.renderStatic(),
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    const { htmlAttributes, bodyAttributes, ...helmet } = this.props.helmet;
    const htmlAttrs = htmlAttributes.toComponent();
    const bodyAttrs = bodyAttributes.toComponent();

    return (
      <html {...htmlAttrs} lang="ko">
        <head>
          {this.props.styles}
          {Object.values(helmet).map((el) => el.toComponent())}
        </head>
        <body {...bodyAttrs}>
          <Main />
          {process.env.NODE_ENV === 'production'
          && <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />}
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;

0

아따마

아래와 같이 모듈식으로 변경을 하였는데도 css가 적용이 안되네요.

import css from '../style.css';

0

제로초(조현영)

import { name } from 경로;

className={name}

이렇게 css 모듈식으로는 안되나요?

0

아따마

_app.js 에서  import '../style.css'; 해줬고 엘레먼트에 className 지정을 했는데도 적용이 안되요 컴파일도 다시 했는데

0

아따마

next에서 css를 추가하려니 next.config.js파일을 만들고 @zeit/next-css를 추가 해야 된다고 해서 

아래와 같이 추가해서 해봤는데 css 적용이 안되네요 또 다른 설정을 해줘야 되나요?

위의 사진과 같은 에러 표시는 사라 졌는데 적용이 안되네요.

0

아따마

next 버전 다운그레이드 했습니다.

css 파일로 react-slick css 를 변경했는데 app.js document.js 변경후

아래와 같은 에러가 뜹니다. 어떤 현상인가요?

0

아따마

네네 document.js 만들고나서 동작하지 않습니다.

0

아따마

코드 변경을 했는데도 페이지가 넘어가지 않고 위와 같은 에러가 나오네요....

0

아따마

답변으로 수정후 컴파일 하는데

<Provider>를 감싸는

<Container> 태그에 대해 에러 뜨는데 버전 문제로 삭제 해줘야 되는 건가요? 

Warning: the `Container` in `_app` has been deprecated and should be removed. https://err.sh/zeit/next.js/app-container-deprecated

next 10 이상에서는 redux dev tool 구동이 안되나요?

0

272

1

세션 갱신 문의 건

0

482

7

배포 진행 후 Highlight updates components render 표시

0

445

1

똑같은 기능을 하는 테이블

0

447

4

관계형

0

312

2

프론트 서버를 이용하지 않는경우

1

299

3

인피니트 스크롤링 사용시 오류

0

278

0

계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.

0

433

2

req.user가 언제 생성되나요??

0

330

2

Cannot read property 'id' of null 에러

0

333

1

리트윗한 게시글 불러오는 sequelize

0

252

1

result.data에서 images인 이유

0

281

2

takeLatest에 대한 질문입니다.

1

342

2

프론트에서 express를 사용하지 않을때 동적라우팅

0

501

6

getInitialProps가 클라이언트에서 수행되는 이유?

0

258

1

리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.

0

445

2

스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다

0

585

2

할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)

0

365

1

nodejs mvc 패턴

0

975

4

사용하고 보니, 람다 구성이 궁금합니다!

0

266

1

제로초님

0

445

1

새로고침 로그인 풀림 문제.

0

247

1

안녕하세요. 강의 너무 감사합니다

0

157

1

제로초님

0

170

1