Next.js で @, ~ などの aliasを使用して、相対パスではなく絶対パスでModuleを楽にimportできるようにする方法

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、Next.js で@,~ などの aliasを使用して、相対パスではなく絶対パスでModuleを楽にimportできるようにする方法について解説します。

Next.js で @, ~ などの aliasを使用して、importを楽にする

他の階層のモジュールを相対パスで importすると、直感的にわかりづらいし、パス変更の際に、書き換えが辛いですね。。。
そこで、今回は、@,~ などの aliasを使用して、importを楽にする方法をご紹介します。

つまり、次のような 相対パスのimportから、

import Robotama from '../../components/atoms/Robotama'

次のような、aliasを使った絶対パスのimportを使えるようにしていきます。

import Robotama from '@/components/atoms/Robotama'

next.config.jsで、Webpackの設定を追加する

まずは、next.config.jsで、Webpackの設定を追加して、@,~ などの aliasを使えるようにしていきます。

見ての通り、config.resolve.alias["@"] = path.resolve(__dirname, "src");や、
config.resolve.alias["~"] = path.join(__dirname, "src");で、
aliasの設定を追加しています。

これで、@or~で、src/からPathがスタートします。

ちなみに、path.resolveとpath.joinの違いは、実行結果のPathが絶対パスになるか、相対パスになるかの違いらしいです。

1. path.resolveは、実行結果のPathが絶対パス。
2. path.joinは、実行結果のPathが相対パス。

next.config.js

const path = require("path");

/** Next.jsの設定値 */
const nextConfig = {
  /** WebPack の設定を追加 */
  webpack: config => {
    // Vue と同じように 「@ = src/」,「~ = src/」に設定する。
    // => モジュールのパス解決とエイリアスを設定している。
    config.resolve.alias["@"] = path.resolve(__dirname, "src");
    config.resolve.alias["~"] = path.join(__dirname, "src");
    return config;
  },
};

module.exports = nextConfig;

TypeScriptを導入している場合は、tsconfig.jsonにも設定を追加する

TypeScript側でもPathを解決できるように、tsconfig.jsonのcompilerOptionsの中に次の設定を追加します。

tsconfig.json

    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./src/*"]
    }

[参考・引用]

https://yamatooo.blog/entry/2021/06/23/083000

https://k-koh.hatenablog.com/entry/2020/07/05/132343

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

1. フルリモート・フルフレックスの働きやすい環境！
   • 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
   • もうフル出社には、戻れなくなります！
2. 経験豊富なエンジニアの先輩方
   • 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
3. 自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
   • 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
4. AI関連の最新の技術に触れられるチャンスが多い。
   • 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
   • ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
5. たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
   • 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

• FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
• BackEnd: Node.js, Express,Python など
• その他技術: Docker, AWS, Git, GitHub など

エントリー方法

1. 私達と東京か札幌で一緒に働ける仲間を募集しています。
   詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

データサイエンティスト向け説明

https://www.wantedly.com/projects/1089406

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212