次のステップでプロジェクトを開始し、絶対パスを設定する方法を公表します.
いつもこのようにプロジェクト設定を開いて、最初に一度設定して、新しいプロジェクトの前に書かないので、忘れてしまい、そのままブログに書いて記録しました.

1.ダウンロード項目

nextの正式なファイルでは、非常に簡潔に説明されています.そのため、多くの点で不明や不明な点があれば、next公式ドキュメントに行って最も役に立つことが多い.
Nextの公式サイトでは、Next自体がタイプスクリプトのCLIコマンドをダウンロードしていることがわかります.
したがって、タイプスクリプトでnextを開始したい場合は、このようにコマンドを発行することができます.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

2.絶対配線の設定

なぜ絶対パスを設定するのですか?

nextは基本的にサーバ側レンダリング(SSR)と検索エンジン最適化(SEO)を支援する「反応フレームワーク」である.
基本的に反応です.
リアクターは、エレメント単位でプロジェクトを分割してコードを記述するため、ファイルのインポート中に非常に複雑になり、特にフォルダ構造が深まる可能性があります.

import MyComponent from '../../../../../MyComponent'

すなわち,極端な場合には,相対経路がここまで深くなる可能性がある.
したがって、これらの不便な点を絶対パスを設定することで解決し、ファイルがどのパスにあるかを直感的に理解することができる.

tsconfig.jsonの設定

{
	"compilerOptions": {
		"baseUrl": ".",
	}
}

タイプスクリプトでは、絶対パスの設定が想像以上に簡単です.tsconfig.jsonファイルまで上のように設定すればいいです.compilerOptionsにおいて、標準的なルーティング経路(bseUrl)は、ルーティング経路.として設定される.

import MyComponent from 'components/MyComponent'

これにより、絶対パスを簡単に設定したり、ルートディレクトリのコンポーネントフォルダから始めたり、共通フォルダを設定したりすることができます.

パス別名

import RoomReservation from "components/accommodations/roomDeatil/body/tabs/reservation/RoomReservation"

絶対パスを設定しても、ディレクトリ構造が深く複雑であればあるほど、絶対パスを設定すればするほど、私がインポートしたファイルの場所が直感的にわかりますが、コード量自体も長くなります.
上のコードは実は私のコードのRoomReservationです.これは、tsxファイルをインポートすると、絶対パスのコード量が著しく増加する実際の例です.
この場合、tsconfig.jsonからパス別名に至るまで、絶対パスコードを少し減らすことができる.

{
	"compilerOptions": {
    	"baseUrl": ".",
      	"paths": {
        	"@roomDetail/*": ["components/accommodations/roomDetail/*"],
        }
    }
}

compilerOptiosnの"paths"項の値が入力される対象にはkey、valueでパスを書けばよい.
「roomDeatil」も削除して、内部のファイルをインポートできると思います.
そこで、別名@roomDeatilを作成し、「@roomDetail/...」と名前を付けました.直接持ってきてもいいです.

import RoomDetail from "@roomDeatil/body/tabs/reservation/RoomReservation"

では、この方法で少し減らすことができます.
一部に別名を作成することで、コードの量を減らし、頻繁にインポートされるパスを簡単にインポートできます.
以上のnextをタイプスクリプトとして使用してプロジェクトを起動し、絶対パスを設定する方法について説明しました.
書き込みタイプのスクリプトは、絶対パスを書かないよりもずっと簡単で、すぐに完了します.