Next.js 애플리케이션을 배포하는 방법

Next.js 애플리케이션을 배포하려면 모든 사용자가 인터넷에서 Next.js 웹 애플리케이션에 액세스하여 상호 작용할 수 있도록 만들어야 합니다.

다양한 배포 옵션을 사용할 수 있지만, Back4app의 서비스형 컨테이너(CaaS) 플랫폼은 몇 가지 장점을 제공합니다. 이러한 장점은 웹 앱을 간편한 단계로 배포하려는 모든 개발자에게 매력적인 선택이 될 수 있습니다.

이 문서에서는 Next.js 애플리케이션을 빌드하고 Back4app의 컨테이너화 서비스를 사용하여 해당 애플리케이션을 호스팅 및 배포하는 방법에 대해 알아봅니다.

주요 내용

• 서비스형 컨테이너 클라우드 모델을 활용하여 Next.js 웹 애플리케이션을 신속하고 효율적으로 배포하는 방법을 배웁니다.

• 서버 측 렌더링, 자동 코드 분할, 빌트인 라우팅, 정적 사이트 생성 등 사용자 경험을 향상시키는 Next.js의 강점을 확인할 수 있습니다.

• 학습 곡선, 제한된 에코시스템, 서버 측 렌더링의 복잡성, 제한된 라우팅 유연성 등 Next.js의 잠재적 한계를 이해하게 됩니다.

Next.js란 무엇인가요?

Next.js는 웹 애플리케이션 생성을 위해 React 라이브러리 위에 확장된 오픈소스 프레임워크입니다. Next.js를 사용하면 필요에 따라 성능을 발휘하는 서버 측 렌더링(SSR) 및 정적으로 생성된 React 애플리케이션을 편리하게 빌드할 수 있습니다.

2016년에 Vercel (이전에는 Zeit로 알려짐)에 의해 만들어졌습니다. 최근 몇 년 동안 Next.js는 사용 편의성과 강력한 기능으로 인해 많은 인기를 얻었습니다.

Next.js의 장점

Next.js는 웹 개발에 널리 사용되는 몇 가지 장점을 제공합니다. 이러한 장점 중 일부는 다음과 같습니다:

서버 측 렌더링

Next.js 프레임워크는 웹 애플리케이션에 서버 측 렌더링을 지원합니다. 서버 측 렌더링을 사용하면 페이지를 클라이언트에 HTML로 전송하기 전에 서버에서 미리 렌더링할 수 있습니다. 더 나은 검색 엔진 최적화(SEO)를 제공합니다.

서버 측 렌더링을 사용하면 페이지가 클라이언트로 전송되기 전에 서버에서 렌더링되므로 페이지의 로드 시간이 늘어납니다. 이는 연결 속도나 디바이스가 느린 사용자에게 특히 유용합니다.

또한 서버 측 렌더링을 사용하면 페이지를 렌더링하기 전에 API 또는 데이터베이스에서 데이터를 쉽게 가져올 수 있습니다.

자동 코드 분할

코드 분할은 JavaScript 애플리케이션과 모든 빌드 코드를 더 작은 덩어리로 나누는 기술을 말합니다. Next.js는 페이지 경로에 따라 코드를 자동으로 분할합니다.

Next.js의 자동 코드 분할 기능으로 초기 페이지 로딩 속도가 빨라집니다. 또한 클라이언트로 전송되는 JavaScript의 양을 줄여 성능과 사용자 경험을 개선합니다.

내장 라우팅

Next.js에 내장된 라우팅 시스템은 이 프레임워크의 중요한 장점입니다. 라우팅 시스템이 내장되어 있어 경로를 정의하고 페이지 사이를 쉽게 탐색할 수 있습니다. Next.js는 클라이언트 측 라우팅과 서버 측 라우팅을 모두 지원합니다.

이 라우팅 시스템은 동적 라우팅을 지원하여 개발자 생산성을 향상하고 애플리케이션 성능을 개선하며 원활하고 효율적인 사용자 경험을 제공합니다.

API 경로

Next.js 애플리케이션에는 개발자가 애플리케이션 내에서 직접 서버리스 API 엔드포인트를 만들 수 있는 기본 API 경로가 함께 제공됩니다. API 경로는 웹 애플리케이션을 구축할 때 여러 가지 이점을 제공하는 Next.js의 강력한 기능입니다.

이러한 이점에는 개발자가 서버리스 함수를 만들고, API 엔드포인트를 정의 및 구성하고, 서버 측 렌더링 중에 데이터를 가져올 수 있다는 점이 포함됩니다. 이 경로를 사용하면 별도의 백엔드 서버가 필요하지 않습니다. 또한 REST 및 GraphQL API도 지원합니다.

Next.js는 API 경로를 사용하여 API 요청을 효율적으로 처리하므로 확장 가능하고 성능이 뛰어나며 SEO 친화적인 애플리케이션을 쉽게 구축할 수 있습니다.

정적 사이트 생성

정적 사이트 생성은 Next.js 프레임워크의 주요 이점입니다. Next.js는 정적 사이트 생성을 사용하여 빌드 시 페이지를 미리 렌더링하고 정적 파일로 제공합니다. 이 기능은 각 페이지를 HTML 파일로 미리 렌더링하여 빠른 페이지 로드 시간을 보장합니다.

정적 사이트는 SEO 친화적이며 공격 벡터가 줄어들어 보안이 더욱 강화됩니다. Next.js로 생성된 정적 사이트는 서버 인프라에 부담을 주지 않고 높은 트래픽 부하를 처리할 수 있으므로 본질적으로 확장성이 뛰어납니다.

Next.js는 정적 사이트에 대한 오프라인 지원을 활성화하여 사용자가 인터넷 연결 없이도 이전에 방문한 페이지를 계속 탐색하고 액세스할 수 있도록 합니다.

Next.js의 제한 사항

Next.js는 서버 측 렌더링된 React 애플리케이션을 구축하기 위한 강력하고 인기 있는 프레임워크이지만, 다음과 같은 몇 가지 제한 사항을 알고 있어야 합니다:

학습 곡선

Next.js는 기존 React 개발에는 익숙하지 않은 추가 개념과 규칙을 도입합니다. Next.js를 사용한 빌드로 전환하려면 특정 아키텍처와 기능을 이해하고 적응하는 데 시간이 필요할 수 있습니다.

Next.js는 프로젝트 요구 사항에 따라 사용자 정의할 수 있는 다양한 구성 옵션을 제공합니다. 도구, 라이브러리 및 플러그인 옵션이 있으므로 시간을 들여 Next.js 에코시스템에 익숙해져야 합니다.

제한된 에코시스템

Next.js는 React 및 Angular와 같은 기존 프레임워크/라이브러리에 비해 비교적 새로운 프레임워크입니다. 따라서 생태계가 아직 성장 중이며 초기 단계에 있습니다. 따라서 기존 프레임워크와 같은 광범위한 라이브러리와 플러그인을 가지고 있지 않습니다.

커뮤니티에서 지원하는 패키지에 의존하거나 특정 요구 사항에 맞는 사용자 지정 솔루션을 구축해야 할 수도 있습니다.

서버 측 렌더링 복잡성

서버 측 렌더링은 Next.js의 강력한 기능이지만 개발 프로세스를 복잡하게 만들 수도 있습니다.

대부분 배우고 구현하는 데 훨씬 더 많은 시간이 필요합니다. 서버 측 렌더링을 사용하면 서버 렌더링 오류 또는 서버와 클라이언트 렌더링 간의 불일치가 발생할 수 있습니다.

이 렌더링을 구현할 때는 주의해야 합니다. 서버와 클라이언트의 상태를 동기화해야 하므로 데이터 가져오기 및 애플리케이션 상태를 효과적으로 관리할 수 있어야 합니다.

제한된 라우팅 유연성

Next.js에는 파일 기반 라우팅 접근 방식을 따르는 라우팅 시스템이 내장되어 있습니다. 이는 많은 경우 라우팅을 단순화하는 것을 목표로 합니다. 그러나 고급 라우팅 라이브러리와 같은 수준의 유연성을 제공하지 못할 수도 있습니다.

기본 규칙을 넘어 라우팅 동작을 사용자 지정하려면 추가적인 해결 방법이 필요할 수 있으며, 이는 항상 편리하지는 않습니다.

Next.js 배포 옵션

서비스형 컨테이너(CaaS) 및 서비스형 인프라(IaaS)를 비롯한 다양한 배포 옵션을 Next.js 애플리케이션에 사용할 수 있습니다.

이러한 옵션이 무엇인지, 어떻게 작동하는지, 구축한 Next.js 애플리케이션에 가장 적합하도록 서로 비교하는 방법을 알고 있어야 합니다.

서비스형 인프라(IaaS)

IaaS는 인터넷을 통해 가상화된 컴퓨팅 리소스를 제공하는 클라우드 컴퓨팅 모델입니다. IaaS를 사용할 때 개발자는 클라우드 제공업체가 호스팅하는 가상 머신(VM)에 애플리케이션을 배포하고 관리할 수 있습니다.

IaaS 플랫폼에 Next.js 애플리케이션을 배포하면 제어 및 유연성 등 다양한 이점이 있습니다. 또한 IaaS 플랫폼은 종량제 프로그램을 따르기 때문에 비용 효율적입니다. 즉, 애플리케이션이 최종적으로 사용하는 리소스에 따라 요금이 부과됩니다.

Next.js 애플리케이션을 배포하는 데 사용할 수 있는 몇 가지 인기 있는 IaaS 플랫폼은 다음과 같습니다:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

서비스형 컨테이너(CaaS)

CaaS는 IaaS 플랫폼과 유사한 클라우드 컴퓨팅 모델입니다. 그러나 컴퓨팅 리소스를 제공하는 것 외에도 컨테이너화된 애플리케이션을 배포하고 관리할 수 있는 완전 관리형 환경을 제공합니다.

즉, 애플리케이션 실행을 처리하는 데 필요한 구성과 작업이 거의 없습니다. 이는 또한 사용자 지정에 대한 제어가 거의 없다는 의미이기도 합니다.

Next.js 애플리케이션을 컨테이너로 배포할 때 애플리케이션 코드, 런타임 및 종속성은 컨테이너 이미지에 번들로 제공됩니다. 그런 다음 이 이미지를 배포하여 CaaS 플랫폼에서 실행할 수 있습니다.

Next.js 애플리케이션을 배포할 수 있는 몇 가지 인기 있는 CaaS 플랫폼은 다음과 같습니다:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

CaaS 플랫폼은 배포를 간소화합니다. 또한 애플리케이션의 확장성, 이동성 및 보안을 개선합니다. 인프라 관리를 추상화하고 기본 제공 오케스트레이션 및 확장 기능을 제공합니다.

Back4App에서 Next.js 앱 빌드 및 배포

이 섹션에서는 Next.js 프레임워크를 사용하여 웹 애플리케이션을 빌드하고 Back4app 컨테이너 서비스를 사용하여 Back4app 플랫폼에 앱을 배포하는 데 필요한 사항에 대해 설명합니다.

플랫폼을 탐색하고 컨테이너 서비스를 사용하여 Back4app 서버를 통해 웹 애플리케이션에 액세스할 수 있도록 하는 방법을 모두 배웁니다. 이 섹션을 읽고 나면 Next.js 앱을 배포하는 방법을 배우게 됩니다.

Back4app 컨테이너란 무엇인가요?

Back4app CaaS 플랫폼은 클라우드 기반 서비스 모델을 제공하는 플랫폼으로, 컨테이너와 애플리케이션을 관리하고 해당 컨테이너에 배포할 수 있습니다.

Back4App 컨테이너는 애플리케이션을 실행할 수 있는 유연하고 확장 가능하며 안전한 환경을 제공하는 Back4App 플랫폼의 강력한 기능입니다.

이러한 컨테이너는 PHP, Python, Node.js 등과 같은 여러 프로그래밍 언어를 지원합니다. 일부 개발자에게는 훌륭한 무료 Next.js 호스팅 플랫폼이기도 합니다.

Back4app의 컨테이너는 필요에 따라 자동으로 확장할 수 있습니다. 각 컨테이너는 다른 컨테이너와 격리되어 애플리케이션의 데이터를 보호합니다. 컨테이너는 Back4App 에코시스템과 쉽게 통합됩니다.

이를 통해 컨테이너를 데이터베이스 및 클라우드 기능과 같은 다른 Back4App 서비스에 쉽게 연결할 수 있습니다.

프로젝트 소개

이 튜토리얼에서는 Next.js를 사용하여 기본 애플리케이션을 빌드합니다. 이 애플리케이션은 fetch API를 사용하여 외부 API에서 임의의 조언을 가져옵니다. 그러면 앱은 빌드할 웹 애플리케이션 인터페이스에 조언을 표시합니다.

Next.js 애플리케이션 빌드를 건너뛰고 Back4app에 애플리케이션을 배포할 수 있습니다. 이 GitHub 리포지토리에서 애플리케이션의 최종 소스 코드를 찾습니다.

전제 조건

이 튜토리얼을 따라 Back4app에 Next.js 애플리케이션을 배포하려면 다음 전제 조건을 충족해야 합니다.

가지고 있는지 확인합니다:

• React 라이브러리 개념에 대한 이해
• Docker 설치를 포함한 Docker 사용 경험
• Node.js 및 NPM에 대한 친숙함
• 컴퓨터에 Git이 설치되어 있고 GitHub 계정이 있어야 합니다.

Next.js 애플리케이션 코딩하기

Next.js 애플리케이션의 스캐폴드를 만들려면 node.js 터미널에서 다음 명령을 실행합니다:

npx create-next-app@latest

위의 명령을 실행하면 터미널에 일련의 프롬프트가 표시됩니다. 이러한 프롬프트는 Next.js 애플리케이션을 구성하기 위한 것입니다.

프롬프트는 이 터미널 스크린샷과 유사합니다.

Next.js는 프롬프트 답변과 일치하도록 애플리케이션을 구성합니다. 이 애플리케이션에는 앱 라우터 및 Tailwind CSS가 필요하지 않습니다. 해당 옵션에 대해서는 아니요를 선택합니다.

애플리케이션이 생성되면 인터페이스 구축을 시작합니다.

먼저 gloals.css 파일에 다음 전역 스타일을 추가합니다:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

globals.css 파일은 src 디렉터리의 스타일 폴더에서 찾을 수 있습니다. 글로벌 스타일을 추가한 후 애플리케이션에 적용하려면 globals.css 파일을 페이지 디렉터리의 _app.tsx 파일로 가져옵니다.

globals.css 파일을 _app.tsx 파일에서 가져오기 전에 먼저 애플리케이션의 레이아웃을 정의하는 레이아웃 컴포넌트를 만들어야 합니다.

이렇게 하려면 src 디렉터리에 컴포넌트 폴더를 만들고 해당 폴더 안에 Layout.tsx 파일을 만듭니다. Layout.tsx 파일에 다음 코드를 작성합니다:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

위의 코드 블록은 레이아웃 컴포넌트를 정의합니다. 레이아웃 컴포넌트에서 홈.module.css 파일에서 스타일을 가져오고 다음/font/google 모듈에서 컴포터 함수를 가져옵니다.

컴포터 함수를 사용하여 컴포터 글꼴을 구성하고 className 프로퍼티를 comforter.className으로 설정하여 헤더의 h1 요소에 적용합니다.

props.children 표현식은 레이아웃 컴포넌트 안에 있는 자식 컴포넌트를 렌더링합니다.

또한 Home.module.css 파일에 헤더 스타일과 기타 필요한 스타일을 정의해야 합니다.

예를 들어

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

이제 global.css 파일과 레이아웃 컴포넌트를 _app.tsx 파일로 가져와서 애플리케이션을 레이아웃 컴포넌트로 래핑합니다:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

애플리케이션의 레이아웃을 정의했습니다. 이제 API에서 조언을 가져와 애플리케이션에 표시할 수 있습니다. 이를 위해 페이지 디렉터리에 있는 index.tsx 파일을 활용합니다.

index.tsx 파일에서 기존 코드를 다음 코드로 재정의합니다:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

코드 블록은 홈 페이지를 정의합니다. 이 코드 블록은 React 라이브러리, 스타일링용 Home.module.css, Google 글꼴 Montserrat를 Next.js 글꼴 라이브러리에서 가져옵니다.

사용효과 훅은 React 컴포넌트에서 부작용을 수행할 수 있는 강력한 도구입니다. 이 애플리케이션에서는 사용효과 훅을 사용하여 API에서 조언을 가져왔습니다. 그런 다음 API에서 가져온 조언을 조언 상태로 설정합니다.

사용효과 훅은 컴포넌트가 렌더링될 때 처음에 실행되고 카운트 상태 값이 변경될 때마다 다시 실행됩니다. 이는 카운트 상태를 의존성 배열의 값으로 설정했기 때문입니다.

생성 버튼을 클릭하면 handleClick 함수가 실행되어 카운트 상태가 1씩 증가합니다. 그러면 사용효과 훅이 다시 실행되어 API에서 새 도움말을 가져와 도움말 상태를 업데이트합니다. 생성 버튼을 클릭할 때마다 새로운 조언이 화면에 표시됩니다.

Next.js 애플리케이션이 완성되었습니다!

애플리케이션을 시작하려면 다음 명령을 실행합니다:

npm run dev

애플리케이션은 로컬 서버 http://localhost:3000 에서 실행 중이어야 합니다.

생성 버튼을 클릭하면 새로운 조언을 가져와서 표시합니다. 또한 ‘조언 번호’가 매번 1씩 증가합니다.

애플리케이션 도커화

Back4app에 Next.js 애플리케이션을 배포하기 전에 애플리케이션을 도커화해야 합니다. 애플리케이션을 도커라이즈하면 애플리케이션과 해당 종속 요소가 도커 컨테이너로 패키징됩니다.

Docker 컨테이너는 필요한 라이브러리 및 구성으로 애플리케이션을 실행할 수 있는 가볍고 격리된 휴대용 방법을 제공합니다.

따라서 Docker가 설치된 모든 머신에 애플리케이션을 쉽게 배포할 수 있습니다. 애플리케이션을 도커화하면 배포가 간소화되고 이식성, 확장성 등이 향상됩니다.

다음은 Next.js 애플리케이션을 도커라이즈하는 방법에 대한 단계별 가이드입니다:

1단계: 프로젝트 루트에 Docker파일 만들기
Next.js 프로젝트의 루트 디렉터리에 Dockerfile이라는 새 파일을 만듭니다. 이 파일에는 애플리케이션의 이미지를 빌드하기 위한 Docker의 지침이 포함됩니다.

2단계: Docker파일 정의하기
Docker파일에 다음 코드를 입력합니다:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

이 도커파일은 다음을 수행합니다:

• 공식 Node.js 14 런타임에서 시작됩니다.
• 작업 디렉터리를 /app로 설정합니다.
• package.json과 package-lock.json을 Docker 이미지에 복사하고 종속성을 설치합니다.
• 나머지 애플리케이션 코드를 Docker 이미지에 복사합니다.
• Next.js 애플리케이션을 빌드합니다.
• 애플리케이션의 포트 3000을 노출합니다.
• 애플리케이션을 시작하는 명령을 정의합니다.

이러한 사양은 애플리케이션이 실행될 환경을 설명합니다.

3단계: Docker 이미지 빌드

터미널에서 다음 명령을 실행하여 Docker 이미지를 빌드합니다:

docker build -t advice-generator .

“advice-generator” 를 Docker 이미지에 지정하려는 이름으로 바꿀 수 있습니다.

Docker 컨테이너 실행

이미지가 빌드된 후에는 다음 명령어를 사용하여 컨테이너로 실행할 수 있습니다:

docker run -p 3000:3000 advice-generator 

이 명령은 Docker 컨테이너의 포트 3000을 머신의 포트 3000에 매핑합니다.

다음 단계에 따라 Docker 컨테이너에서 Next.js 애플리케이션을 실행합니다. 웹 브라우저에서 http://localhost:3000 으로 이동하여 액세스할 수 있습니다.

Next.js 애플리케이션을 GitHub에 푸시하기

애플리케이션을 도커화한 후에는 애플리케이션을 GitHub 리포지토리로 푸시해야 합니다. 애플리케이션을 GitHub 리포지토리로 푸시하려면 GitHub 계정 내에서 새 리포지토리를 만들고 터미널의 애플리케이션 디렉터리에서 다음 명령을 실행합니다:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: 이 명령은 현재 디렉터리에 새 Git 리포지토리를 초기화합니다.
• git add: 이 명령은 현재 디렉터리에 있는 모든 파일을 스테이징 영역에 추가합니다.
• git remote add origin : 이 명령은 로컬 리포지토리를 원격 리포지토리에 연결합니다. 를 원격 리포지토리의 를 원격 리포지토리의 URL로 바꿉니다.
• git commit -m ‘초기 커밋’: 이 명령은 스테이징 영역에 작성된 모든 변경 내용을 새 커밋에 저장합니다.
• git branch -M main: 이 명령은 메인 브랜치를 새로 만들고 이 브랜치로 전환한다.
• git push -u origin main: 이 명령은 메인 브랜치에 있는 커밋을 오리진 원격 리포지토리로 푸시한다.

Back4app에 애플리케이션 배포

Back4app에 애플리케이션을 배포하려면 먼저 Back4app 계정을 만들어야 합니다. 이렇게 하려면 다음 단계를 따르세요:

1. Back4app 웹사이트를 방문하세요.
2. ‘가입하기 ‘ 버튼을 클릭합니다.
3. 가입 양식을 작성하여 제출하세요.

이미 Back4app 계정을 설정한 경우 로그인하여 다음 단계를 진행하면 됩니다.

계정을 만든 후 계정에 로그인하고 “새 앱”을 클릭합니다.

버튼을 클릭합니다. 버튼은 화면 오른쪽 상단에서 찾을 수 있습니다.

아래와 유사한 화면이 표시됩니다.

컨테이너를 사용하여 애플리케이션을 빌드하고 배포하려면 서비스형 컨테이너 옵션을 선택합니다. 빌드는 오래 걸리지 않습니다. 빌드가 끝나면 GitHub 계정을 빌드된 CaaS 애플리케이션에 연결합니다.

그런 다음 Back4app 애플리케이션에서 연결된 GitHub 계정에서 배포할 리포지토리를 선택합니다.

이제 리포지토리를 선택했으니 이제 애플리케이션을 배포하는 일만 남았습니다. 배포하기 전에 이름을 지정하고 배포를 구성해야 합니다.

‘앱 만들기’ 버튼을 클릭하여 애플리케이션을 배포합니다.

Back4app에 애플리케이션을 성공적으로 배포했습니다. 위 화면에서 Back4app에서 제공한 링크로 이동하여 웹에서 애플리케이션에 액세스할 수 있습니다.

결론

Next.js는 서버 측 렌더링(SSR) React 애플리케이션을 구축하기 위한 오픈소스 프레임워크입니다. 또한 정적 사이트 생성, 자동 코드 분할, 기본 제공 라우팅, API 라우팅 등 많은 장점을 제공합니다. 이러한 장점으로 인해 Next.js는 강력한 프레임워크가 되었습니다.

Back4pp의 CaaS를 사용하여 Next.js 애플리케이션을 배포하면 개발 프로세스가 간소화됩니다. Back4app CaaS 플랫폼은 확장 가능하고 안전하며 비용 효율적인 솔루션으로 Next.js 애플리케이션을 배포할 수 있습니다.

사용자 친화적인 인터페이스, 실시간 업데이트, GraphQL 및 REST API 지원, 자동화된 백업, 서버리스 환경으로 개발자에게 완벽한 선택입니다.

자주 묻는 질문