WEB制作レッスン 33週目 typescript

JSXをTypescriptに切り替える作業をしている途中でエラーが出たので解決していきたいと思います。

import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

エラーメッセージ：'Component' refers to a value, but is being used as a type here. Did you mean 'typeof Component'?

まずはこのページの内容を細かく理解できなくてもいいので全部眺めてみるとよいでしょう。
https://typescriptbook.jp

その上で、Nextjs のこの記事にある typescript での書き方に直すのが良さそうです
https://nextjs.org/docs/pages/building-your-application/routing/custom-app

主に型注釈を追加していくことになりすね。その過程で型注釈の書き方を試して、また最初の記事に戻って読んで理解して、それをもとにさらに書き直して試して、というのを繰り返すと良いでしょう。

なんどもためしてわからないときは、それをなんとかしてここに書いて行きましょう。何がわからないかわからない、などもあると思いますので、なにを考えてなにを試したが結果どうだった、などを書いていただけると、アドバイスができるとおもいます

import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

エラーメッセージ：'Component' refers to a value, but is being used as a type here. Did you mean 'typeof Component'?

↑
解決したのでメモ

まず、Next.js公式の記事にあるtypescriptでの書き方に直す。

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

これでもまだエラーが出ていたので、調べたら、app.jsをapp.tsにしていて、それをapp.tsxにしなければいけなかった。

更にimport '@/styles/globals.css'がModule not foundのエラーが発生した。
これは、tsconfig.json内での問題だった。

"compilerOptions": {}に"paths": { "@/": ["./src/"]},を追加することで修正された。

今日はdeployの際のエラーと格闘していました。

Vscord上ではエラーが無くなったが、Vercelにdeployすると以下のエラーが出る。

エラーメッセージからは何が原因なのか特定できず、未だ解決できていません。