Next.js 사용하기

Next.js 사용 방법

1. 환경 설정

• Node.js와 npm이 설치되어 있는지 확인

2. Next.js 설치

• 새로운 Next.js 프로젝트를 시작하려면 터미널에서 다음 명령어를 실행합니다.

//둘 중 택 1
npx create-next-app@latest

yarn create next-app

• 명령어를 실행하면 프로젝트 이름을 입력하는 프롬프트가 나타나는데 원하는 이름을 입력한 후 Enter를 누름.

• 아래처럼 메세지가 출력되는데 상황에 맞게 응답하면 프로젝트가 생성됨.

What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

3. 프로젝트 실행

• 생성된 프로젝트 디렉토리로 이동하여 개발 서버 시작

     cd [프로젝트 이름]
     npm run dev

• 브라우저에서 'http://localhost:3000'에 접속하면 Next.js 앱을 확인할 수 있음

4. 페이지 생성:

• Next.js에서는 'pages' 디렉토리에 JavaScript 또는 TypeScript 파일을 추가하여 새로운 페이지를 생성할 수 있음.
• 예를 들어, 'pages/about.js' 파일을 만들고 해당 파일에 다음 코드를 추가하면 '/about' 경로에서 해당 페이지를 확인할 수 있습니다.

     export default function About() {
       return <div>About</div>
     }

5. 데이터 가져오기

• Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 지원한다
• 'getServerSideProps' 함수를 사용하면 SSR을, 'getStaticProps' 함수를 사용하면 SSG을 수행할 수 있다

yarn dev, yarn build와 yarn start

1. yarn dev

• 기능: 개발 모드에서 Next.js 애플리케이션을 실행한다.
• 특징: 소스 코드 변경 시 자동으로 애플리케이션을 리로드하여 변화를 즉시 반영한다. 에러 리포팅과 라이브 리로딩 기능을 제공하여 개발 과정을 편리하게 한다.

2. yarn build

• 기능: 프로덕션(실제 서비스)용으로 Next.js 애플리케이션을 빌드한다.
• 특징: 코드 최적화, 미니파이, 성능 개선 작업 등을 수행하며, 빌드 결과물은 '.next' 폴더에 생성된다.

3. yarn start

• 기능: 'yarn build'로 빌드된 애플리케이션을 프로덕션 모드로 실행한다.
• 주의: 'yarn start'를 실행하기 전에 반드시 'yarn build'를 먼저 실행해야 한다. 왜냐하면 'yarn start'가 빌드 결과물을 기반으로 애플리케이션을 실행하기 때문이다.

열이 39.2도 나지만, 코딩을 멈출 수는 없지!