AWS로 Next.js 배포하기1 (next.config .js)

• Next.js 배포하기1 (next.config .js)
• 1.next.config.js 설정
• 2. bundle-analyzer
  • 어떤 위주로 봐야할까?
• 3. cross-env
• 4. 배포하기

Next.js 배포하기1 (next.config .js)

Root 디렉토리에 next.config.js파일을 생성하면 next의 설정을 변경할 수 있다.

 

1.next.config.js 설정

nextConfig는 전역설정으로 배포에 관련된 코드를 작성한 것이다.

 

next.config.js

const path = require('path');
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const withVideos = require('next-videos');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
});

const nextConfig = withBundleAnalyzer({
    compress: true,
    webpack(config, {webpack}){
        const prod = process.env.NODE_ENV === 'production';
        const plugins = [...config.plugins];
        
        return {
            ...config,
            mode: prod? 'production' : 'development',
            devtool: prod? 'hidden-source-map' : 'eval',
            plugins,
            
        };
    },
});
// module.exports=withImages();
module.exports = withPlugins(
    [
        [withImages, {}],
        [withVideos, {}],
    ], nextConfig
    // {
     //global config here   
       
    //}
);
    

    

기존에 설정해 놨던 코드 설명

• next-images와 next-videos는 랜딩페이지를 제작하는데 png와 mp4파일을 로컬에서 불러와야해서 적용한 설정들이다.
• next-compose-plugins는 다중 plugin들을 동시에 설정하게 해주는 기능을 한다.

 

그 후 package.json에서 아래와 같이 빌드 코드를 작성하면 된다.

• cross-env ANALYZE=true NODE_ENV=production next build 

 

2. bundle-analyzer

배포 직전에 사용. 미리해봤자 나중에 다시 해야된다.

 

ANALYZE === true로 설정하고 빌드를 하면 자신의 코드가 어떻게 빌드 되었는지 보여주는 아래와 같이 브라우저에 창이 뜬다. (서버, 클라이언트 창이 각각 따로 뜸)

 

그 중에서도 클라이언트 부분을 잘 확인해야 한다.

사용자와 바로 연결되어있는 부분이라서 용량이 크면 로딩 속도가 느려진다.

 

어떤 위주로 봐야할까?

합쳐저있는(concatenated) 폴더는 스킵하고 큰 덩어리 부분들 위주로 확인하고 쪼개져있는 부분들을 봐야한다.

(지금 위에 있는 사진은 뷰가 1개인 랜딩페이지만 있기 때문에 중요한 덩어리들 밖에 없어서 볼게 없다...)

 

☛ 쓸데 없는 거 빼려면  'treeshaking'을 검색해보면 된다.

 

3. cross-env

ANALYZE=true NODE_ENV=production next build 의 스크립트 코드는 리눅스나 맥에서만 작동이 된다.

 

그러므로 다른 OS에서 사용할 때는 cross-env를 설치하여 다음과 같이 빌드해줘야 한다.

• cross-env ANALYZE=true NODE_ENV=production next build

 

4. 배포하기

next start (port 3060으로 바꿈)으로 배포하면 된다.

"start": "cross-env NODE_ENV=production next start -p 3060"

---

참고

인프런 강의 - React로 Nodebird SNS 만들기