[Next.js] 絶対パスでコンポーネント追加

2022-04-01 hit count image

TypeScriptベースのNext.jsで絶対パスを使ってコンポーネントを追加(import)する方法について説明します。

概要

今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトで絶対パスでコンポーネントを追加(import)する方法について説明します。

ここで紹介するソースコードは下記のリンクで確認できます。

ブログリスト

このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。

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が自動で開いて、次のような画面が表示されます。

create-next-app first app

完了

今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトで絶対パスでコンポーネントを追加(import)する方法についてみてみました。これで、こんポーネンっとを追加する時、どこのフォルダで持って来たかもっと分かりやすくなりました。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts