[튜토리얼] Next.js 프로젝트 시작하기 2편 (CSS 스타일링에서 Vercel을 통한 배포까지)

 

1. CSS 스타일링 설정 (SASS를 사용한 방식)

 

Next.js에서는 다음과 같이 다양한 방식의 CSS 스타일링을 지원한다.

 

• CSS Modules: CSS 클래스를 로컬 범위로 설정하여 이름 충돌을 방지.

• Global CSS: 전체 적용되는 CSS 스타일을 지정, 앱이 커질수록 스타일 관리가 어려워질 수도 있다.

• Tailwind CSS: 유틸리티 우선 CSS 프레임워크로, 유틸리티 클래스를 조합하여 빠르게 커스텀 CSS를 설정할 수 있다.

• Sass: 변수, 중첩 규칙, 믹스인 등의 기능을 제공하여 현재 널리 사용되는 CSS 전처리기입니다.

• CSS-in-JS: JavaScript 컴포넌트 내에 CSS를 직접 삽입하여 동적으로 스타일을 적용할 수 있다.

 

그 중에 가장 보편적으로 사용되는 Sass 위주로 설명을 하고자 한다.

Sass를 사용하려면 먼저 아래 커맨드로 노드 모듈 설치가 필요하다.

npm install --save-dev sass

 

그 다음 스타일용 파일(scss)을 작성한 다음 페이지 컴포넌트에서 import하기만 하면 된다.

app 폴더 아래에 먼저 variables.module.scss라는 파일을 만들고 아래 코드를 붙여넣자.

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

 

적용하기 원하는 페이지 컴포넌트에서 이런 방식으로 import해보자.

import variables from './../variables.module.scss'

export default function Dashboard() {
    return (
      <div>
        <p style={{ color: variables.primaryColor }}>This is the Dashboard page.</p>
      </div>
    );
}

 

완료되었으면 해당 페이지에 접속해서 스타일 변경을 확인해보자.

 

 

 

2. Vercel을 이용한 배포 방법

 

Vercel은 Next.js 개발사에서 만든 프로젝트 배포 플랫폼이다. Vercel는 CI/CD(지속적 통합 및 배포)와 같은 자동화 기능을 기본적으로 제공하고 깃허브 같은 Git 서비스와도 연동할 수 있어 배포를 쉽고 편리하게 할 수 있게 도와준다.

 

먼저 Vercel 홈페이지에 방문해 가입을 진행하자.

 

https://vercel.com/home

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

 

GitHub, GitLab, Bitbucket 계정이 있으면 로그인할 수 있다 (여기선 GitHub로 진행).

그 다음 레포지토리를 하나 작성하고 Next.js 프로젝트 소스를 푸쉬한다.

Git 툴은 어떤 것을 사용해도 무방한데 참고로 필자는 Sourcetree를 사용하고 있다.

 

구체적으로 설명하면 Next.js 소스 파일이 들어 있는 폴더에서 cmd를 실행해 아래 커맨드를 친 다음,

git init
git add .
git commit -m "Initial commit"

 

깃주소를 지정해서 push하면 끝이다.

git remote add origin https://github.com/your-username/your-repo-name.git
git branch -M main
git push -u origin main

 

아래처럼 푸시가 제대로 되었는지를 확인해보자.

 

이제 Vercel과 이 깃허브 리포지토리를 연동하면 된다.

연동은 그다지 어렵지 않다. overview 탭에서 오른쪽 흰 버튼 'Add New...' > Project를 클릭한 후 진행하면 된다.

 

설정이 완료되면 첫 배포를 진행하는데 빌드 파일에 이상이 있으면 오류가 뜰 수도 있다.

정상으로 빌드가 되면 아래와 같이 배포 완료 화면이 표시된다.

 

 

메인 화면 스냅샷 이미지와 URL이 표시되며,

클릭해 해당 웹페이지로 바로 이동할 수도 있다.

 

깃허브와 연동되어 깃허브 브랜치에 변경된 소스가 푸시될 경우,

아래 화면처럼 변경을 자동으로 감지해 빌드 후 다시 배포한다.

 

의도한 변경만 배포될 수 있도록 배포용 브랜치 관리에 유념하도록 하자.

 

오늘은 CSS 스타일링과 배포까지 진행해 보았다.

다음에는 Vercel을 이용한 DB 설정 방법, DB에 저장한 데이터를 화면에 띄우는 것까지 진행해 보도록 하겠다.