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が指定した通りに設定されていること確認します。

参考文献

• Webpack公式ドキュメント | Resolve
• next.js公式ドキュメント| next.config.js