React Next.js 사용하면서 콘솔 에러 해결하기

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

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

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,

위 코드처럼 export default class MyDocument extends Document { 로 작성하게 되면 아래와같은 오류가 나타난다.

next에서 다른 파일들은 몰라도 _document 파일만은 hook 함수를 사용하지 못한다고한다.

터미널창 오류확인

Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

A codemod is available to fix the most common cases: https://nextjs.link/codemod-ndc
info  - ready on http://localhost:3060

터미널창에 이런 거슬리는 문구들이 자꾸 나타난다면

문제해결

$npx @next/codemod withamp-to-config

이거 실행해주자 😊