【設定方法】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の開発中に発生する Warning: Prop `className` did not match. Server: Client: ...の解決策
- article
Next.jsとEdge Runtimeを組み合わせて超爆速サーバーレス表示を実現する方法
- article
Next.jsでSEO対策を強化するための5つのポイント + アンチパターンの回避策
- article
Next.js × Suspenseを活用した非同期ルーティング体験を実現する方法
- article
next/image vs 外部CDNを徹底比較!Next.js画像最適化戦略を考えてみた
- article
Next.js 「App Router」と「Pages Router」の違いと移行のコツ
- article
JavaScript 開発者必見!TypeScript への移行で得られる 7 つのメリット
- article
javascript関数型で利用できる配列操作メソッドまとめ
- article
【2025年3月版】JavaScript時間操作ライブラリを徹底比較!日付処理の最適解とは?
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決策】express-sessionでセッションが保存されない問題の原因と対応
- article
styled-components の特徴と Next.js のプロジェクトへstyled-componentsを導入するまでの手順
- article
Immer 連携で状態更新をもっと簡単に:Zustand で使う produce の技
- article
Tailwind と CSS Modules は共存できる?両立パターンと使い分け
- article
【対処法】Cursorで発生する「We're having trouble connecting to the model provider...」エラーの原因と対応
- article
マイクロフロントエンドアーキテクチャを TypeScript で実現する方法
- article
Claude 4 の API 活用術!開発者が知るべき実装方法
- article
次世代 Markdown:WASM 対応で広がる新しい可能性
- review
もう疲れ知らず!『最高の体調』鈴木祐著で手に入れた、一生モノの健康習慣術
- review
人生が激変!『苦しかったときの話をしようか』森岡毅著で発見した、本当に幸せなキャリアの築き方
- review
もう「何言ってるの?」とは言わせない!『バナナの魅力を 100 文字で伝えてください』柿内尚文著 で今日からあなたも伝え方の達人!
- review
もう時間に追われない!『エッセンシャル思考』グレッグ・マキューンで本当に重要なことを見抜く!
- review
プロダクト開発の悩みを一刀両断!『プロダクトマネジメントのすべて』及川 卓也, 曽根原 春樹, 小城 久美子
- review
ビジネスも人生も攻略!『行動経済学が最強の学問である』の衝撃