XM Cloud のサンプルとなる sxastarter ではよく利用するパスに関して、簡単に指定できるように tsconfig.json で path の定義が追加されています。これを今回は個人の好みですが、 @/ で記述する形に統一していきます。
tsconfig.json の設定
この設定は Next.js というより Typescript の設定になります。まず sxastarter のコンパイルオプションに関して、初期値では以下のように設定されています。
JSON
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"components/*": ["src/components/*"],
"lib/*": ["src/lib/*"],
"temp/*": ["src/temp/*"],
"assets/*": ["src/assets/*"],
"graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
"react": ["node_modules/react"]
},これにより、毎回 src を記述しなくても明示的にパスを記述できる点、そしてコードの可視性が高まるというのがあります。
最近の Next.js のデフォルトの値は以下のようになっています。
JSON
"paths": {
"@/*": ["./src/*"]
}そこで、個別に components などをしているコードに対して、@/components という記述で動作するように、path に関して補正していきます。まず、tsconfig.json に関しては以下のように変更しました。
JSON
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"components/*": ["src/components/*"],
"lib/*": ["src/lib/*"],
"temp/*": ["src/temp/*"],
"graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
"react": ["node_modules/react"],
"@/*": ["./src/*"]
},既存のコードのパスを変更するのは手間がかかるため、components 、lib および temp はそのままとします。assets のフォルダは、Next.js の TailwindCSS のサンプルと同じようにフォルダを src\tailwindcss\src\styles として変更します。
このため、スタイルシートを読み込んでいる src\tailwindcss\src\pages\_app.tsx にて、新しいパスで読み込みができるように以下のように書き換えます。
TypeScript
import '@/styles/globals.css';まとめ
個人的には Next.js の初期設定の @/ を使えるようにしたいという形で、簡単ではありますがこの変更をしました。src の下でコードを記述している場合は、この変更をしておくといいと思います。