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

概要

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

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

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/4.absolute_path

ブログリスト

このブログポストはシリーズで作成されています。次は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が自動で開いて、次のような画面が表示されます。

完了

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

Github Sponsor

Buy me a coffee

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

アプリ広報

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

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

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

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

目次

概要

ブログリスト

TypeScript ベース Next.js プロジェクト生成

tsconfig.json ファイル修正

絶対パスを使ってコンポーネントを追加する

実行

完了

アプリ広報