[NextJS] Next.JS 공식문서 튜토리얼 번역하며 공부하기 (3)

Jay·2022년 3월 3일

Next.JS 공식문서 튜토리얼

목록 보기

3/3

※ Next.JS의 공식문서 튜토리얼을 번역합니다
※ 각 챕터 내 Setup 파트는 생략했습니다. 실습하던 프로젝트로 계속 진행하시면 됩니다.
※ 필자 입맛대로 한 번역이므로 주의 요함
※ 오역, 오타에 대한 피드백 두 팔 벌려 환영

API Routes

Next.js는 Node.js에서의 서버리스 기능으로 API 엔드포인트를 손쉽게 생성하게 해 주는 API Routes를 지원합니다. 이 기능은 우리 블로그에 필요하진 않지만, 어떻게 사용하는지에 대해 간략히 설명해 보도록 할게요.

What You'll Learn in This Lesson

이 레슨에서 당신이 배우게 될 것은,

API Route 생성 방법
API Routes에 관한 유용한 정보

1. Creating API Routes

API Routes는 Next.js 앱에서 API 엔드포인트를 만들게 해 줍니다. pages/api 폴더 안에 다음과 같은 형식의 함수를 만들면 돼요.

// req = HTTP incoming message, res = HTTP server response
export default function handler(req, res) {
  // ...
}

람다와 같이 유명한 서버리스

Creating a simple API endpoint

한번 해 봅시다. pages/api 폴더 안에 hello.js 파일을 만든 후, 아래의 코드를 넣어 주세요.

export default function handler(req, res){
	res.status(200).json({ text: "Hello" })
}

이 URL에 접속하면 {"text":"Hello"} 라는 문자가 보여야 합니다.

req는 미리 빌드되어 있던 미들웨어가 더해진 http.IncomingMessage 인스턴스입니다.
res helper functions가 더해진 http.ServerResponse 인스턴스입니다.

끝입니다! 레슨을 마무리하기 전, 다음 페이지에서 API Routes에 대한 몇 가지 유용한 팁을 얘기해 볼게요.

2. API Routes Details

API Routes에 대해 당신이 알아야 하는 필수 정보입니다.

Do Not Fetch an API Route from `getStaticProps` or `getStaticPaths`

getStaticPros 혹은 getStaticPaths로 API 경로를 가져오면 안 됩니다. 그 대신에, getStaticProps 혹은 getStaticPaths 내부에 직접 서버 사이드 코드를 작성하거나 헬퍼 함수를 호출하세요.

왜냐하면 getStaticProps와 getStaticPaths는 오직 서버 사이드에서 작동합니다. 절대 클라이언트 사이드에서 작동하지 않아요. 심지어 브라우저를 위한 JS 번들에 포함되지도 않을 겁니다. 이 말인 즉슨, 데이터베이스 쿼리와 같은 코드를 브라우저로 전달되지 않도록 하여 작성할 수 있다는 거예요. 자세한 내용은 이 문서를 참조하세요.

A Good Use Case: Handling Form Input

API Routes의 좋은 사용법은 form의 input값 처리입니다. 예를 들면, 당신은 페이지에 form를 생성하여 API 경로로 POST요청을 보내야 해요. 이런 경우 당신은 해당 정보를 데이터베이스에 저장하는 코드를 곧바로 작성할 수 있습니다. API Route의 코드는 클라이언트 번들에 포함되지 않으니깐, 당신은 안전하게 서버 사이드 코드를 작성해도 되는 거죠.

export default function handler(req, res) {
  const email = req.body.email
  // Then save email to your database, etc...
}

Preview Mode

정적 생성 방식은 당신의 페이지가 헤드리스 CMS로부터 데이터를 가져올 때 유용합니다. 하지만 당신의 헤드리스 CMS에 초안을 작성할 때나 프리뷰 페이지가 즉시 보여지길 원할 때는 이상적이지 않습니다. 당신은 빌드타임 대신 요청시에 이 페이지들이 렌더링 되기 원할 거고, 게시된 컨텐츠 대신 초안 컨텐츠를 가져오길 원할 겁니다. Next.js가 이런 특정 경우에만 정적 생성을 건너뛰길 원할 수도 있구요.

Next.js는 위와 같은 문제를 해결하기 위해 프리뷰 모드라고 불리는 기능을 가지고 있으며, 이는 API Routes를 활용합니다. 자세한 내용은 프리뷰 모드 문서를 참조하세요.

Dynamic API Routes

API Routes는 다른 보통의 페이지처럼 동적입니다. 자세한 내용은 Dynamic API Routes 문서를 참조하세요.

That's it!

마지막 기초 과정에선, 운영단계를 위해 Next.js 앱을 배포하는 방법에 대해 배울 겁니다.

Deploying Your Next.js App

마지막 기초 과정에서 우리는 운영단계를 위해 Next.js 앱을 배포해 볼 겁니다.

우리는 Vercel을 통해 Next.js 배포 방법을 배울 건데요, Vercel은 Next.js 제작자들이 만든 배포 플랫폼입니다. 배포 옵션에 대해서도 알아보도록 하죠.

필수사항 : 이 레슨을 위해서는 GitHub 계정을 갖고 있어야 합니다.

What You’ll Learn in This Lesson

이 과정에서 배우게 될 것은,

Vercel을 이용한 Next.js 앱 배포 방법
DPS 워크플로우 : Develop, Preview, Ship
호스팅 업체를 이용한 Next.js 앱을 배포 방법

1. Push to GitHub

배포하기 전에, 만약 우리의 Next.js 앱을 GitHub에 푸시하지 않았다면 해 보도록 합니다. 이건 배포를 더욱 쉽게 만들어 줄 거예요.

당신의 GitHub 계정에 접속하고, nextjs-blog 라는 리포지토리를 생성해 주세요.
리포지토리는 공개 상태여도 되고, 비공개 상태여도 됩니다. README나 다른 파일로 리포지토리를 초기화할 필요는 없습니다.
리포지토리 설정에 관해 도움이 필요하다면, 이 문서를 읽어 보세요.

그 다음,

Next.app을 위한 git 리포지토리를 로컬에서 초기화 하세요.
GitHub 리포지토리에 당신의 Next.js app을 푸시하세요.

GitHub에 push하기 위해선, 아래의 명령문을 실행시켜야 합니다. <username>은 당신의 GitHub username으로 바꿔 주세요.

git remote add origin https://github.com/<username>/nextjs-blog.git
git push -u origin main

GitHub 리포지토리가 준비됐으면, 다음 페이지로 갑시다.

2. Deploying Your Next.js App

Deploy to Vercel

Next.js를 가장 쉽게 배포하는 방법은 Next.js 제작자가 만든 Vercel 이라는 배포 플랫폼을 사용하는 것입니다.

Vercel은 헤드리스 컨텐츠와, 정적이고 하이브리드한 어플리케이션을 위한 서버리스 플랫폼입니다.

Create a Vercel Account

먼저, Vercel에 가서 계정을 생성해야 합니다. Continue with GitHub를 선택하고, 가입 절차를 진행하세요.

Import your 'nextjs-blog' repository

회원가입에 성공했다면, Vercel로 nextjs-blog 리포지토리를 import 해야 합니다. 이 페이지에서도 할 수 있습니다.

GitHub용 Vercel을 설치해 주세요. 모든 리포지토리에 대한 접근 권한을 허용하세요.
Vercel을 설치했으면, nextjs-blog를 import하세요.

아래와 같은 기본 세팅을 사용할 수 있습니다. 어떤 것도 바꿀 필요 없어요. Vercel은 자동적으로 당신의 앱이 Next.js로 되어 있는 걸 감지하고 당신을 위한 최적의 빌드 세팅을 고릅니다

프로젝트명
루트 폴더
빌드 명령어
아웃풋 폴더
개발 명령어

배포를 할 때, 당신의 Next.js 앱은 빌드를 시작합니다. 몇 분이면 끝날 거예요.

도움말 : 만약 배포에 실패한다면, GitHub Discussions에서 언제든 도움을 구할 수 있어요. 배포에 관한 자세한 사항은 이 문서를 참조하세요.

배포가 끝났다면 당신은 배포 URL을 얻게될 겁니다. 여러 개의 URL 중 하나를 클릭하면 Next.js의 스타터 페이지를 볼 수 있어요.

축하합니다! 당신은 방금 Next.js 앱을 운영에 배포했어요. 다음 페이지에선 Vercel의 세부사항과 우리가 추천하는 워크플로우에 대해 알아볼게요.

3. Next.js and Vercel

Vercel은 Next.js 제작자에 의해 만들어졌으며, Next.js에 최적화된 지원을 합니다. Next.js 앱을 Vercel로 배포할 때, 아래의 사항이 기본으로 작동합니다.

페이지는 정적 생성 방식을 사용하며 assets(JS, CSS, images, fonts 등)은 미치도록 빠른 Vercel Edge Network로부터 자동적으로 제공될 것입니다.
페이지는 서버 사이드 렌더링을 사용하고 API Routes는 자동적으로 서버리스 기능으로 분리됩니다. 이는 페이지 렌더링과 API 요청이 무한히 오르는 것을 가능케 합니다.

Vercel에는 더 많은 기능이 있습니다.

Custom Domains : Vercel로 배포를 하고 나면, 당신의 Next.js 앱에 원하는 도메인을 할당할 수 있습니다. 관련 문서를 확인해 보세요.
Environment Variables : Vercel에 대한 환경변수를 설정할 수 있습니다. 관련 문서를 확인해 보세요. Next.js 앱에서 이러한 환경 변수를 사용할 수 있습니다.
Automatic HTTPS : 커스텀 도메인을 포함한 HTTPS는 기본적으로 사용 가능합니다. 다른 부가적인 설정은 필요 없죠. Vercel은 SSL 인증서를 자동으로 갱신합니다.

Preview Deployment for Every Push

아래의 절차는 선택사항입니다. 실습해 봐도 되고, 그냥 읽기만 해도 돼요.

Vercel로 배포한 후, 아래의 사항을 해 보도록 할게요.

당신의 앱에 새로운 브랜치를 생성하세요.
변경사항을 만들고 GitHub로 push하세요.
새로운 pull request를 만드세요.(GitHub help page)

pull request 페이지에 vercel 봇의 코멘트를 볼 수 있을 거예요.

코멘트 안에 Preview URL을 클릭해 보세요. 방금의 변경사항이 적용된 걸 볼 수 있습니다.

pull request를 보내면, Vercel은 해당 브랜치의 모든 push에 대해 자동적으로 preview 배포를 생성합니다. preview URL은 항상 최신의 preview 배포를 가리키죠.

당신은 이 preview URL을 당신의 동료와 공유할 수 있고 즉시 피드백을 받을 수 있어요.

preview 배포에 문제가 없어 보인다면, main에 머지(merge)시키세요. 그렇게 했을 때, Vercel은 자동적으로 운영용 배포를 생성합니다.

Develop, Preview, Ship

우리는 방금 DPS(Develop, Preview, Ship)를 경험한 거예요.

Develop : Next.js로 코드를 작성하고, Next.js 개발서버가 가진 핫 리로딩이라는 장점을 경험했죠.
Preview : 우리는 변경사항을 GitHub로 push했고, Vercel은 URL을 통해 접근할 수 있는 preview 배포를 생성했습니다. 우리는 피드백을 위해 preview URL을 공유할 수 있어요.
Ship : 우리는 운영 배포를 위해 pull request를 main에 머지시켰습니다.

Next.js 앱을 배포할 때, 우리는 이러한 워크플로우를 따를 것을 강력히 권장합니다.

4. Other Hosting Options

Next.js는 Node.js를 지원하는 호스팅 제공자로 배포될 수 있습니다.

아직까지 이 과정을 따라오고 있다면, package.json 파일 안에 아래의 build와 start 스크립트를 추가하세요.

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

호스팅 제공자를 사용한다면, 운영용 어플리케이션을 .next 폴더에 빌드 시켜 줄 build 스크립트를 한 번 실행시키면 됩니다.

npm run build

빌드 후에, start 스크립트로 Node.js 서버를 구동시킵니다. Node.js 서버는 정적 생성되는 페이지와 서버 사이드 렌더링 되는 페이지 그리고 API Routes를 제공하는 하이브리드 페이지를 지원합니다.

npm run start

Tip : 당신은 PORT 변수를 허용하도록 package.json의 start 스크립트를 커스텀할 수 있습니다. "start": "next start -p $PORT"

끝입니다! Next.js 배포에 관해 질문이 있다면, 이곳의 커뮤니티에서 질문해 주세요.

Jay

개발할래요💻

이전 포스트

[NextJS] Next.JS 공식문서 튜토리얼 번역하며 공부하기 (3)

Next.JS 공식문서 튜토리얼

API Routes

What You'll Learn in This Lesson

1. Creating API Routes

Creating a simple API endpoint

2. API Routes Details

Do Not Fetch an API Route from `getStaticProps` or `getStaticPaths`

A Good Use Case: Handling Form Input

Preview Mode

Dynamic API Routes

That's it!

Deploying Your Next.js App

What You’ll Learn in This Lesson

1. Push to GitHub

2. Deploying Your Next.js App

Deploy to Vercel

Create a Vercel Account

Import your 'nextjs-blog' repository

3. Next.js and Vercel

Preview Deployment for Every Push

Develop, Preview, Ship

4. Other Hosting Options

[NextJS] Next.JS 공식문서 튜토리얼 번역하며 공부하기 (2)

0개의 댓글

[NextJS] Next.JS 공식문서 튜토리얼 번역하며 공부하기 (3)

Next.JS 공식문서 튜토리얼

API Routes

What You'll Learn in This Lesson

1. Creating API Routes

Creating a simple API endpoint

2. API Routes Details

Do Not Fetch an API Route from getStaticProps or getStaticPaths

A Good Use Case: Handling Form Input

Preview Mode

Dynamic API Routes

That's it!

Deploying Your Next.js App

What You’ll Learn in This Lesson

1. Push to GitHub

2. Deploying Your Next.js App

Deploy to Vercel

Create a Vercel Account

Import your 'nextjs-blog' repository

3. Next.js and Vercel

Preview Deployment for Every Push

Develop, Preview, Ship

4. Other Hosting Options

[NextJS] Next.JS 공식문서 튜토리얼 번역하며 공부하기 (2)

0개의 댓글

Do Not Fetch an API Route from `getStaticProps` or `getStaticPaths`