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

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

Next.jsで作ったアプリケーションで開発を行う時に
ファイルimportでパスのエイリアスを利用するための設定を行なったので
手順としてやり方をメモします。

alias(エイリアス)について

aliasはパスを設定する際にわずらわしいパスの記述を
短縮して簡潔にかける仕組みになります。

alias(エイリアス)の例

alias(エイリアス)なし

../../という形で相対パスで書かなければなりません。

JavaScript
import Hoge from '../../components/Hoge'

alias(エイリアス)あり

@という形で簡潔に書けます。

JavaScript
import 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の設定

全体のコード

先に全体のコードを記載します。
解説はこの後に記載させていただいています。

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でインストールしたパッケージを読み込みます。

next.config.js
const path = require("path"); const webpack = require("webpack");

webpackの設定に追加する

configの引数からnext.jsで隠蔽されている設定が取得できるため
ここに aliasの設定を追記します。

next.config.js
webpack(config, options) { console.log(config); // webpackの設定が確認できる }

aliasの設定を追加

next.config.jsが置いてある階層の src ディレクトリを指定して
src/hoge@hogeでimportできるように指定しています。

next.config.js
config.resolve.alias = { "@": path.resolve(__dirname, "./src/"), };

importの記述

src/main.js
import Hoge from "@hoge/hoge.js"

TypeScriptの場合

tsconfig.jsonの設定

TypeScriptの場合この設定を入れないと
ビルド時やエディタでエラーが発生するため追記します。

tsconfig.json
{ "compilerOptions": { "paths": { "@/*": ["src/*"] }, } }

再ビルド・起動して確認

本番用のビルド・起動を実行して確認します。

$ yarn next build && yarn next start

ビルド・起動が完了したらアプリケーションを開いて
aliasが指定した通りに設定されていること確認します。

参考文献

終わりに

最後までご覧いただきありがとうございます。
この記事では【設定方法】Next.js開発時にファイルimportでパスの alias(エイリアス)利用するためのサンプルコードについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。