[Next.js]レスポンスの設定

Whatsappクローン符号化を行いながら次のステップに進みます。jsを試してみたいです。

what is Next.js?

Next.インストールjs

yarn create next-app
or
yarn create next-app 프로젝트명

最初からプロジェクト名が心配です.後でどんなprojectnameを使うか聞いてみますほほほ

作成したプロジェクトの実行

yarn dev

糸devに直接動作し、http://localhost:3000/ページに進むことができます.
でもえっ!
pages/index.jsファイルに入ってみると、何の間違いもない画面が出てきてよかったのですが、1行目でimport部分に赤い下線が出てきて、ずっと問題が表示されていました.
次を聞いてみた.jsバージョンのアップグレードに伴い、追加設定が必要なものがあります.

エラーコード

Parsing error: Cannot find module 'next/babel'

解決策

プロジェクト上部のルートフォルダに.babelrcフォルダを作成します.
作成したプロジェクトフォルダの真下に1つだけ作成します.

追加するデフォルトコード

{
  "presets": ["next/babel"],
  "plugins": []
}

styled-conentsも使用するのでstyled-conentsをpluginに追加

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true, // 서버사이드 렌더링 옵션
        "displayName": true, // 태그 class명에 디렉토리, 컴포넌트명 추가
        "preprocess": false
      }
    ]
  ]
}

.eslintrc.json修正

//기존코드
{
  "extends": "next/core-web-vitals"
}
->
//수정된 코드
{
  "extends": ["next/babel"]
}

여기까지 수정하면 오류수정 끝!