概要
今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトで絶対パスでコンポーネントを追加(import)する方法について説明します。
ここで紹介するソースコードは下記のリンクで確認できます。
ブログリスト
このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。
- [Next.js] 始まる
- [Next.js] TypeScript
- [Next.js] Prettier
- [Next.js] 絶対パスでコンポーネント追加
- [Next.js] テスト
- [Next.js] Storybook
- [Next.js] Storybookのバックグラウンド変更
- [Next.js] 多言語
- [Next.js] MUI
TypeScriptベースNext.jsプロジェクト生成
TypeScriptが適用されたNext.jsで絶対パスを使ってコンポーネントを追加する方法を確認するため、次のコマンドを実行してTypeScriptが適用されたNext.jsプロジェクトを生成します。
npx create-next-app --typescript my-app
tsconfig.jsonファイル修正
TypeScriptが適用されたNext.jsで絶対パスを使ってコンポーネントを追加するため、tsconfig.jsonファイルを修正する必要があります。tsconfig.jsonファイルを開いて次のようにbaseUrlを追加します。
{
"compilerOptions": {
...
"baseUrl": "./"
},
...
}
これで絶対パスを使ってコンポーネントを追加する準備ができました。
絶対パスを使ってコンポーネントを追加する
このように設定された内容を確認するため、pages/index.tsxファイルを開いて下記のように修正します。
...
import styles from 'styles/Home.module.css'
const Home: NextPage = () => {
return (
...
)
}
export default Home
このように../を使わなくルート(Root)フォルダを基準にしてコンポーネントを追加することができます。
実行
追加した内容がうまく起動されるかを確認するため、次のコマンドを実行します。
npm run dev
上のコマンドがうまく実行されたら、ブラウザでhttp://localhost:3000が自動で開いて、次のような画面が表示されます。
完了
今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトで絶対パスでコンポーネントを追加(import)する方法についてみてみました。これで、こんポーネンっとを追加する時、どこのフォルダで持って来たかもっと分かりやすくなりました。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
