next.jsで絶対パスを使用する方法(TypeScript)

babel-plugin-module-resolverをインストール

• babel-plugin-module-resolver: https://github.com/tleunen/babel-plugin-module-resolver

$ npm install --save-dev babel-plugin-module-resolver

or

$ yarn add --dev babel-plugin-module-resolver

.babelrcにカスタムルート、エイリアスを設定(.babelrcがなければ作成する)

.babelrc

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "module-resolver",
            {
                "root": [
                    "."
                ],
                "alias": {
                    "@": "./src"
                }
            }
        ]
    ]
}

tsconfig.jsonにbaseUrlとパスを設定

tsconfig.json

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

これでimport Button from '@/components/button'のように使用できる

package.json

package.json

"dependencies": {
    "next": "latest", (9.3)
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.0",
    "redux": "^3.6.0",
    "redux-devtools-extension": "^2.13.2"
  },
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^13.13.1",
    "@types/react": "^16.9.34",
    "babel-plugin-module-resolver": "^4.0.0",
    "typescript": "^3.8.3"
  }