※当サイトはアフィリエイト広告を利用しています。商品リンクにはプロモーションを含む場合があります。

プロが教える、業界最前線のノウハウ【Coloso】

困ってた自分に届けたい話

開発が進んでくると、ファイルの階層が深くなっていきますよね。
気づけば、../../../components/Button のような import 文が何度も登場…。

「あれ？このファイル、どこから import してたっけ？」
「../ を3回戻って、また中に入って……ややこしい！」

そんな風に、パスが複雑になって迷子になる問題に悩まされていた方も多いはず。
実際、現場でも「エイリアスパスを使わないとPRが通らない」なんてこともあるらしいっす…。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

Next.js をもっと詳しく学びたい人へおすすめの本

▶ 動かしながら基礎から学びたい人に
「まずは手を動かしたい！」という人にぴったりの一冊。基本構造から丁寧に解説されており、Next.jsとReactの連携も自然に身につきます。初学者でもステップを追いやすく、サンプルアプリの構築を通して理解を深められる構成です。

動かして学ぶ！Next.js/React開発入門 新品価格 ￥3,168から (2025/7/21 23:18時点)

▶ Reactの経験があり、次のステップへ進みたい人に
「Reactは少し触ったことがあるけど、Next.jsを仕事で使いこなしたい」という人向け。実践を意識した構成で、Webアプリの構造、レンダリング戦略、SEO対応など、現場で必要なノウハウが詰まっています。

React Next.js 実践プログラミング入門: React Next.js モダンWeb開発実践ガイド 新品価格 ￥3,300から (2025/7/21 23:17時点)

▶ App Routerを本格的に学びたいエンジニアへ
App Routerを軸に、最新のNext.js開発に対応した本格派。中級者以上の方が「一歩先へ進みたい」と感じたときに読みたい一冊。デザインパターンや設計の視点もあり、長期的に役立つ内容です。

実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書 新品価格 ￥3,665から (2025/7/21 23:18時点)

エイリアスってなに？

エイリアスとは、長い相対パスを短くわかりやすくするための別名のこと。

// Before（地獄）
import Header from "../../../components/shared/Header";

// After（天国）
import Header from "@/components/shared/Header";

// Before（地獄）
import Header from "../../../components/shared/Header";

// After（天国）
import Header from "@/components/shared/Header";

このように、@/ を使ってパスを簡略化することで、

• 階層の深さに悩まされない
• コードが一気に読みやすくなる

といったメリットがあります。

Next.js + TypeScriptでの設定方法

tsconfig.json にパスエイリアスを設定

こうしておくと、@/components は src/components にマッピングされます。

{
  "compilerOptions": {  // tsのコンパイル設定
    "baseUrl": "./",　　　// パスの基準（プロジェクトルート）
    "paths": {
      "@/*": ["src/*"]　// "@/..." → "src/..." に変換
    }
  }
}

{
  "compilerOptions": {  // tsのコンパイル設定
    "baseUrl": "./",　　　// パスの基準（プロジェクトルート）
    "paths": {
      "@/*": ["src/*"]　// "@/..." → "src/..." に変換
    }
  }
}

現場ではどう使われてる？

エイリアスは、以下のように「機能別フォルダ」と組み合わせて使われています。

こうすることで、プロジェクトの保守性がグッと上がります。
誰が見ても、何を import してるのか一目瞭然です。

豆知識：baseUrl を "./" にしないとどうなる？

baseUrl の設定が "./" になっていないと、パスの解決がうまくいきません。
たとえば、"src" にしてしまうと @/components が src/src/components になってしまい、バグの原因に。

迷ったら baseUrl は "./" に固定でOK！

もっと開発知識つけたい方！こちらの記事はどうですか？

GitHubのHTTPS・SSH・CLIの違いとは？接続方法の選び方をわかりやすく解説！

GitHubへの接続方法にはHTTPS、SSH、CLIの3つがあります。それぞれの特徴や違いを知ることで、よりスムーズなGit操作が可能になります。初心者にもわかりやすく、使い方や選び方を丁寧に解説します。

it-bokenki.com

てんハロ運営者

おつかれさまでした！