Next.jsで作成したプロジェクトにtypescriptを導入しようとした際にエラーが表示される。

実現したいこと

掲載の件につきまして解決したいです。
元々エラーは出ていないNextのプロジェクトにtsをインストールし設定を多少変えて
順次拡張子をts/tsxに変更しエラーや警告を解消していこうと思ったのですが、おそらく設定系のエラーが出ているので意図していた内容ではありません。
それらを解消したいです。

発生している問題・分からないこと

初回エラー
入力ファイルを上書きすることになるため、ファイル '/〜〜〜〜〜/next.config.js' を書き込めません。
→next.sonfig.tsに変更
next.sonfig.tsのエラー(内容は最初から変更してないので省略します。)
'import.meta' メタプロパティは、'--module' オプションが 'es2020'、'es2022'、'esnext'、'system'、'node16'、または 'nodenext' の場合にのみ許可されます。
→ "target": "esnext", にしているのにエラーになってしまい解決できませんでした。

①各ファイルを1個づつts対応していこうと思いましたが
一旦全て拡張子をts/tsxにしていって、並行してそれぞれのファイルで発生するエラーや警告を解消しないといけないようなイメージでしょうか？(本件tsconfigのエラー)

②next.config.tsにつきましてはエラー文に書かれた事をそのまま解消したつもりでしたが、まだエラー変わらずです。どのようにすれば解消できそうでしょうか？

エラーメッセージ

error
1初回エラー
2入力ファイルを上書きすることになるため、ファイル '/〜〜〜〜〜/next.config.js' を書き込めません。
3→next.config.tsに変更
4
5next.config.tsエラー
6'import.meta' メタプロパティは、'--module' オプションが 'es2020'、'es2022'、'esnext'、'system'、'node16'、または 'nodenext' の場合にのみ許可されます。
7

該当のソースコード

tsconfig.json
1
2{
3  "compilerOptions": {
4    /* Language and Environment */
5    "target": "esnext",                                  /* Set the JavaScript language version for emitted 
6    /* Modules */
7    "module": "commonjs",
8    /* JavaScript Support */
9    "jsx": "react-jsx",
10    "allowJs": true,
11    /* Interop Constraints */
12    "esModuleInterop": true,
13    "forceConsistentCasingInFileNames": true,
14    /* Type Checking */
15    "strict": true,
16    "noImplicitThis": true,
17  }
18}

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

解決できませんでした。

補足

特になし

juner

2025/02/03 09:56

tsconfig.json の compilerOptions.module がエラー内容の通りだからではないでしょうか？

行動規範の内容に同意します

回答1件

Next.jsプロジェクトへのTypeScript導入とエラー解消について
Next.jsプロジェクトにTypeScriptを導入し、拡張子を順次変更していく際に発生した設定系のエラーとのこと、大変ですね。具体的なエラーメッセージがあるとより的確なアドバイスができますが、一般的な原因と解決策をいくつかご紹介します。

考えられる原因と解決策
TypeScriptの設定不足または誤り:

tsconfig.json:
コンパイルオプションが適切に設定されているか確認してください。特に、target, lib, module, jsx の設定が重要です。
exclude や include でコンパイル対象を調整できます。
型定義ファイル:
使用しているライブラリの型定義ファイルがインストールされているか確認してください。@types パッケージを使用します。
カスタムの型定義ファイルを作成する必要がある場合もあります。
JSXファクトリ:
jsx オプションと jsxFactory オプションが一致しているか確認してください。Next.jsでは通常 React.createElement を使用します。
Next.jsの設定との衝突:

next.config.js:
TypeScriptの設定とNext.jsの設定が衝突している可能性があります。特に、webpack の設定に注意してください。
Next.

投稿2025/02/04 10:13

kylie575

総合スコア4

KAI

2025/02/04 23:25

ご丁寧な回答ありがとうございます。 .nextフォルダを削除後再度「npm run dev」コマンドを実行したところ ./next/typesの中身がpackage.jsonだけになりました。〜中身〜　{"type": "module"}　〜〜そして、tscコマンドを実行するとdistフォルダにはtsconfig.tsbuildinfoが生成されます。エラーは出ていないのですが、初めてのNext+Tsなので、この状態が正常なのか異常なのかも分かってはいない状態です。 kylie575さんから見てどのような状態かと思うか、ご教授頂けますと嬉しいです！〜〜tsconfig.jsonの中身〜〜 { "compilerOptions": { "target": "esnext", "module": "commonjs", "jsx": "preserve", "allowJs": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitThis": true, "skipLibCheck": true, "lib": [ "dom", "dom.iterable", "esnext" ], "noEmit": true, "incremental": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "plugins": [ { "name": "next" } ] }, "include": [ "next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx" ], "exclude": [ "node_modules" ] }

KAI

2025/02/04 23:52

何度もすみません。 tsc --noEmit実行後 typesフォルダ内にappフォルダが生成されその中にlayout.tsとpage.tsが生成されています。やはりlayout.tsでエラーが発生しています。〜〜layout.tsの中身〜〜 // File: /Users/itogakai/Desktop/readingcommunity/src/app/layout.tsx import * as entry from '../../../src/app/layout.js' import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js' type TEntry = typeof import('../../../src/app/layout.js') // Check that the entry is a valid entry checkFields<Diff<{ default: Function config?: {} generateStaticParams?: Function revalidate?: RevalidateRange<TEntry> | false dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static' dynamicParams?: boolean fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache' preferredRegion?: 'auto' | 'global' | 'home' | string | string[] runtime?: 'nodejs' | 'experimental-edge' | 'edge' maxDuration?: number metadata?: any generateMetadata?: Function viewport?: any generateViewport?: Function }, TEntry, ''>>() // Check the prop type of the entry function checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>() // Check the arguments and return type of the generateMetadata function if ('generateMetadata' in entry) { checkFields<Diff<LayoutProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>() checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>() } // Check the arguments and return type of the generateViewport function if ('generateViewport' in entry) { checkFields<Diff<LayoutProps, FirstArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>() checkFields<Diff<ResolvingViewport, SecondArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>() } // Check the arguments and return type of the generateStaticParams function if ('generateStaticParams' in entry) { checkFields<Diff<{ params: PageParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>() checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>() } type PageParams = any export interface PageProps { params?: any searchParams?: any } export interface LayoutProps { children?: React.ReactNode params?: any } // ============= // Utility types type RevalidateRange<T> = T extends { revalidate: any } ? NonNegative<T['revalidate']> : never // If T is unknown or any, it will be an empty {} type. Otherwise, it will be the same as Omit<T, keyof Base>. type OmitWithTag<T, K extends keyof any, _M> = Omit<T, K> type Diff<Base, T extends Base, Message extends string = ''> = 0 extends (1 & T) ? {} : OmitWithTag<T, keyof Base, Message> type FirstArg<T extends Function> = T extends (...args: [infer T, any]) => any ? unknown extends T ? any : T : never type SecondArg<T extends Function> = T extends (...args: [any, infer T]) => any ? unknown extends T ? any : T : never type MaybeField<T, K extends string> = T extends { [k in K]: infer G } ? G extends Function ? G : never : never function checkFields<_ extends { [k in keyof any]: never }>() {} // https://github.com/sindresorhus/type-fest type Numeric = number | bigint type Zero = 0 | 0n type Negative<T extends Numeric> = T extends Zero ? never : `${T}` extends `-${string}` ? T : never type NonNegative<T extends Numeric> = T extends Zero ? T : Negative<T> extends never ? T : '__invalid_negative_number__' 〜〜エラー内容〜〜 .next/types/app/layout.ts:8:13 - error TS2344: Type 'OmitWithTag<typeof import("/Users/itogakai/Desktop/readingcommunity/src/app/layout"), "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | ... 6 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'. Property '_NotoSerifJP' is incompatible with index signature. Type 'NextFont' is not assignable to type 'never'. 8 checkFields<Diff<{ ~~~~~~ 9 default: Function ~~~~~~~~~~~~~~~~~~~ ... 24 25 }, TEntry, ''>>() ~~~~~~~~~~~~~~ Found 1 error in .next/types/app/layout.ts:8 私では解決できなかったので、もし分かれば教えて頂きたいです。

行動規範の内容に同意します