【設定方法】Next.js開発時にファイルimportでパスの alias(エイリアス)利用するためのサンプルコード

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Next.jsで作ったアプリケーションで開発を行う時に
ファイルimportでパスのエイリアスを利用するための設定を行なったので
手順としてやり方をメモします。
alias(エイリアス)について
aliasはパスを設定する際にわずらわしいパスの記述を
短縮して簡潔にかける仕組みになります。
alias(エイリアス)の例
alias(エイリアス)なし
../../
という形で相対パスで書かなければなりません。
JavaScript
import Hoge from '../../components/Hoge'
alias(エイリアス)あり
@
という形で簡潔に書けます。
JavaScriptimport Hoge from '@components/Hoge'
alias(エイリアス)のメリット
短縮して簡潔に
例のようにエイリアスがあることで
短縮して簡潔に書くことができる様になります。
リファクタリングしやすい
ファイル移動時に階層が変わる場合
通常はパスを書き直さなければなりませんが
エイリアスを設定することで書き直す必要がなくなります。
環境
- React 17.0.2
- Next.js 7.0
必要なパッケージのインストール
webpackをインストール
next.js
はwebpackが内包されているため
設定を変更する場合は別途インストールします。
※ npmでインストールする場合は適宜置き換えてください。
terminal$ yarn add -D webpack
ディレクトリ構成
terminal├── next.config.js
└── src
├── hoge
│ └── hoge.js
└── main.js
next.config.jsの設定
全体のコード
先に全体のコードを記載します。
解説はこの後に記載させていただいています。
javascript// next.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = webpack(config, options) {
config.resolve.alias = {
"@": path.resolve(__dirname, "./src/"),
};
return config;
}
インストールしたパッケージの読み込み
requireでインストールしたパッケージを読み込みます。
javascript// next.config.js
const path = require("path");
const webpack = require("webpack");
webpackの設定に追加する
config
の引数からnext.js
で隠蔽されている設定が取得できるため
ここに alias
の設定を追記します。
javascript// next.config.js
webpack(config, options) {
console.log(config);
// webpackの設定が確認できる
}
aliasの設定を追加
next.config.js
が置いてある階層の src
ディレクトリを指定して
src/hoge
を@hoge
でimportできるように指定しています。
javascript// next.config.js
config.resolve.alias = {
"@": path.resolve(__dirname, "./src/"),
};
importの記述
javascript// src/main.js
import Hoge from "@hoge/hoge.js"
TypeScriptの場合
tsconfig.jsonの設定
TypeScriptの場合この設定を入れないと
ビルド時やエディタでエラーが発生するため追記します。
json// tsconfig.json
{
"compilerOptions": {
"paths": { "@/*": ["src/*"] },
}
}
再ビルド・起動して確認
本番用のビルド・起動を実行して確認します。
zsh$ yarn next build && yarn next start
ビルド・起動が完了したらアプリケーションを開いて
aliasが指定した通りに設定されていること確認します。
参考文献
- article
Next.js × pnpm/Turborepo 初期構築:ワークスペース・共有パッケージ・CI 最適化
- article
Next.js Route Handlers vs API Routes:設計意図・性能・制約のリアル比較
- article
Remix と Next.js/Vite/徹底比較:選ぶべきポイントはここだ!
- article
【実測検証】Remix vs Next.js vs Astro:TTFB/LCP/開発体験を総合比較
- article
Next.js で「Dynamic server usage: cookies/headers」はなぜ起きる?原因と解決手順
- article
Zustand × Next.js の Hydration Mismatch を根絶する:原因別チェックリスト
- article
JavaScript IntersectionObserver レシピ集:無限スクロール/遅延読込を最短実装
- article
JavaScript Web Workers 実践入門:重い処理を別スレッドへ逃がす最短手順
- article
JavaScript OffscreenCanvas 検証:Canvas/OffscreenCanvas/WebGL の速度比較
- article
JavaScript メモリリーク診断術:DevTools の Heap スナップショット徹底活用
- article
JavaScript Streams API 活用ガイド:巨大データを分割して途切れず処理する
- article
【早見表】JavaScript でよく使う Math メソッドの一覧と活用事例
- article
Vitest `vi` API 技術チートシート:`mock` / `fn` / `spyOn` / `advanceTimersByTime` 一覧
- article
Pinia ストア分割テンプレ集:domain/ui/session の三層パターン
- article
Obsidian Markdown 拡張チートシート:Callout/埋め込み/内部リンク完全網羅
- article
Micro Frontends 設計:`vite-plugin-federation` で分割可能な UI を構築
- article
TypeScript 公開 API の型設計術:`export type`/`interface`/`class`の責務分担と境界設計
- article
Nuxt nuxi コマンド速見表:プロジェクト作成からモジュール公開まで
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来