next.js 절대경로 설정

package.json 파일에서
script를

"scripts": {
    "dev": "NODE_PATH=. next dev",
    "build": "NODE_PATH=. next build",
    "start": "next start"
  }

위와 같이 NODE_PATH=. 를 추가해준다.

NODE_PATH는 모듈을 로드할 경우 모듈이 위치한 경로를 말하는데,
cra로 프로젝트를 생성한 경우 개발할 때 사용하는 대부분의 모듈이 src 폴더 내에
존재하기 때문에 NODE_PATH=src로 설정해주면 되지만, next.js로 프로젝트를 생성한 경우
src라는 폴더가 존재하지 않고, pages와 component라는 폴더가 각각 존재하기 때문에
각 폴더에 접근할 수 있어야 한다.
따라서 NODE_PATH=.로 설정해주면 된다.

또한 next.config.js 파일에서 plugin에 module-resolver, alias를 추가하면 된다.

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(
  withSass({
    target: 'server',
    webpack(config, options) {
      config.module.rules.push(
        {
          test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 100000,
            },
          },
        },
      );
      return config;
    },
    =======================
    이 부분
    plugins: [
      'module-resolver',
      {
        alias: {
          '~/*': '.',
        },
      },
    ],
    ========================
  }),
);