Next.js && github에 정적사이트 배포

작성일자 : 24/04/19(금)

https://github.com/gregrickaby/nextjs-github-pages

위의 사이트를 참고해서 Next.js로 포트폴리오를 만든 후 github에 정적 사이트를 배포하려는 기록을 남기려고 한다.

일단 위의 사이트를 참고를 하고 나만의방식은 이렇게 하였다.

next.config.mjs파일 수정

여기서 내 프로젝트이름은 : ‘/YangTi-PortFolio’이다.

const isProd = process.env.NODE_ENV === 'production';
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    assetPrefix: isProd ? '/YangTi-PortFolio' : '',
    basePath: isProd ? '/YangTi-PortFolio' : '',
    images: {
        domains: ['noticon-static.tammolo.com', 'loremflickr.com'],
        unoptimized: true
    },
};

export default nextConfig;

public폴더에 .nojekyll파일 추가

.nojekyll 파일

. ├── app/ ├── public/ │ └── .nojekyll ├── next.config.js

이미지 경로

css파일 과 Styled-components로 인한 경로 차이

아래처럼 public안의 asset들은 ‘ . / ‘ 이런식으로 맞춰주면 된다. 외부 아이피는 그냥 입력하면된다.

 <SkillComponent src='./icons/html5-color.svg' text='HTML5' />
              <SkillComponent src='./icons/css3-color.svg' text='CSS3' />
              <SkillComponent src='./icons/javascript-color.svg' text='JS' />
              <SkillComponent src='./icons/typescript-color.svg' text='TS' />
              <SkillComponent src='./icons/react-color.svg' text='React' />

              <SkillComponent src='./icons/nextdotjs-color.svg' text='Next.js' />
              <SkillComponent src='./icons/reactquery-color.svg' text='ReactQuery' />
              <SkillComponent src='<https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1566557264/noticon/eyhvbmh82nhdoydl4j2a.png>' text='Node.js' />
              <SkillComponent src='<https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1568851518/noticon/lwj3hr9v1yoheimtwc1w.png>' text='Styled-Components' />

깃허브 저장소에서 세팅 변경
1. Pages를 찾은후
2. GitHub Actions로 변경
gitHub Action 설정
1. .github/workflows/deploy.yml파일 생성
2. 아래 내용 붙여넣기
  
  deploy.yml파일
이후 깃 커밋후 push 하기

일반적으로 그냥 main브랜치에서 commit 하고 push하면된다.

.nojekyll 파일

css파일 과 Styled-components로 인한 경로 차이

deploy.yml파일