기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# Next.js에 대한 Amplify 지원
Amplify는 Next.js를 사용하여 생성된 서버 측 렌더링(SSR) 웹 앱에 대한 배포 및 호스팅을 지원합니다. Next.js는 JavaScript로 SPA를 개발하기 위한 React 프레임워크입니다. Next.js 버전을 Next.js 15까지 올려 빌드한 앱을 배포할 수 있으며, 여기에는 이미지 최적화 및 미들웨어와 같은 기능이 포함됩니다.
개발자는 Next.js를 사용하여 정적 사이트 생성(SSG)과 SSR을 단일 프로젝트에 결합할 수 있습니다. SSG 페이지는 빌드 시 프리렌더링되며, SSR 페이지는 요청 시 프리렌더링됩니다.
프리렌더링은 성능과 검색 엔진 최적화를 개선할 수 있습니다. Next.js는 서버의 모든 페이지를 프리렌더링하므로 각 페이지의 HTML 콘텐츠가 클라이언트의 브라우저에 도달되는 즉시 이용할 수 있습니다. 이러한 콘텐츠는 또한 더 빨리 로드될 수 있습니다. 로드 시간이 빨라지면 최종 사용자의 웹사이트 이용 경험이 향상되고 사이트의 SEO 순위에 긍정적인 영향을 미칩니다. 또한 프리렌더링은 검색 엔진 봇이 웹사이트의 HTML 콘텐츠를 쉽게 찾고 크롤링할 수 있도록 하여 SEO를 개선합니다.
Next.js는 첫 번째 바이트까지의 시간(TTFB)과 첫 번째 콘텐츠를 렌더링하는 데 걸리는 시간(FCP)과 같은 다양한 성능 지표를 측정하기 위한 내장된 분석 지원을 제공합니다. Next.js에 관한 자세한 내용은 Next.js 웹사이트의 [시작하기](https://nextjs.org/docs/getting-started)를 참조하세요.
## Next.js 기능 지원
Amplify Hosting 컴퓨팅은 Next.js 12부터 15 버전까지 빌드된 앱의 서버 측 렌더링(SSR)을 완벽하게 관리합니다.
2022년 11월에 Amplify Hosting 컴퓨팅이 릴리스되기 전에 Amplify에 Next.js 앱을 배포한 경우, 앱은 Amplify의 이전 SSR 공급자인 Classic(Next.js 11만 해당)을 사용합니다. Amplify Hosting 컴퓨팅은 Next.js 11 또는 그 이전 버전을 사용하여 만든 앱을 지원하지 않습니다. Next.js 11 앱을 Amplify Hosting 컴퓨팅 관리형 SSR 공급자로 마이그레이션하는 것이 좋습니다.
다음 목록은 Amplify Hosting 컴퓨팅 SSR 공급자가 지원하는 특정 기능을 설명합니다.
**지원되는 기능**
+ 서버 측 렌더링 페이지(SSR)
+ 정적 페이지
+ API 라우팅
+ 동적 라우팅
+ 모든 라우팅 포착
+ SSG(정적 생성)
+ 증분 정적 재생성(ISR)
+ 다국어(i18n) 하위 경로 라우팅
+ 다국어(i18n) 도메인 라우팅
+ 다국어(i18n) 자동 로케일 감지
+ 미들웨어
+ 환경 변수
+ 이미지 최적화
+ Next.js 13 앱 디렉터리
**지원되지 않는 기능**
+ 엣지 API 경로(*엣지 미들웨어 미지원*)
+ *온디맨드* 증분 정적 재생성(ISR)
+ Next.js 스트리밍
+ 정적 자산 및 최적화된 이미지에서 미들웨어 실행
+ 응답 후 `unstable_after`(Next.js 15와 함께 출시된 실험적 기능)를 사용해 코드 실행
### Next.js 이미지
이미지의 최대 출력 크기는 4.3MB를 초과할 수 없습니다. 더 큰 이미지 파일은 다른 곳에 저장해 두고 Next.js Image 구성 요소를 사용하여 Webp 또는 AVIF 형식으로 크기를 조정하고 최적화한 다음, 더 작은 크기로 제공할 수 있습니다.
참고로, Next.js 설명서에서는 프로덕션 환경에서 이미지 최적화가 올바르게 작동할 수 있도록 Sharp 이미지 처리 모듈을 설치할 것을 권장합니다. 그러나 Amplify 배포에는 필요하지 않습니다. Amplify는 Sharp를 자동으로 배포합니다.
# Amplify에 Next.js SSR 애플리케이션 배포
Amplify는 기본적으로 Next.js 12부터 15 버전까지 지원하는 Amplify Hosting의 컴퓨팅 서비스를 사용하여 새 SSR 앱을 배포합니다. Amplify Hosting 컴퓨팅에서는 SSR 앱을 배포하는 데 필요한 리소스를 완벽하게 관리합니다. 2022년 11월 17일 이전에 배포한 Amplify 계정의 SSR 앱은 Classic(Next.js 11만 해당) SSR 공급자를 사용합니다.
Classic(Next.js 11만 해당) SSR을 사용하는 앱을 Amplify Hosting 컴퓨팅 SSR 공급자로 마이그레이션하는 것이 좋습니다. Amplify는 자동 마이그레이션을 수행하지 않습니다. 앱을 수동으로 마이그레이션한 다음 새 빌드를 시작하여 업데이트를 완료해야 합니다. 지침은 [Next.js 11 SSR 앱을 Amplify Hosting 컴퓨팅으로 마이그레이션](update-app-nextjs-version.md) 섹션을 참조하세요.
새 Next.js SSR 앱을 배포하려면 다음 지침을 따릅니다.
**Amplify Hosting 컴퓨팅 SSR 공급자를 사용하여 Amplify에 SSR 앱을 배포하려면**
1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.
1. **모든 앱** 페이지에서 **새 앱 생성**을 선택합니다.
1. **Amplify로 빌드 시작** 페이지에서 Git 리포지토리 공급자를 선택하고 **다음**을 선택합니다.
1. **리포지토리 브랜치 추가** 페이지에서 다음을 수행합니다.
1. **최근 업데이트된 리포지토리** 목록에서 연결할 리포지토리 이름을 선택합니다.
1. **브랜치** 목록에서 연결할 리포지토리 브랜치의 이름을 선택합니다.
1. **다음**을 선택합니다.
1. 앱은 Amplify가 사용자를 대신하여 다른 서비스를 호출할 때 맡는 IAM 서비스 역할을 필요로 합니다. Amplify Hosting 컴퓨팅이 자동으로 서비스 역할을 생성하도록 허용하거나 사용자가 생성한 역할을 지정할 수 있습니다.
+ Amplify가 자동으로 역할을 생성하여 앱에 연결할 수 있도록 하려면
1. **새 서비스 역할 생성 및 사용**을 선택합니다.
+ 이전에 생성한 서비스 역할을 연결하려면
1. **기존 서비스 역할 사용**을 선택합니다.
1. 목록에서 사용할 역할을 선택합니다.
1. **다음**을 선택합니다.
1. **검토** 페이지에서 **저장 및 배포**를 선택합니다.
## Package.json 파일 설정
Next.js 앱 배포 시 Amplify는 `package.json` 파일에 있는 앱의 빌드 스크립트를 검사하여 애플리케이션 유형을 결정합니다.
다음은 Next.js 앱의 빌드 스크립트 예입니다. 빌드 스크립트 `"next build"`는 앱이 SSG 페이지와 SSR 페이지를 모두 지원함을 나타냅니다. 이 빌드 스크립트는 Next.js 14 이상 SSG 전용 앱에도 사용됩니다.
```
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
```
다음은 Next.js 13 또는 이전 SSG 앱의 빌드 스크립트 예입니다. 빌드 스크립트 `"next build && next export"`는 앱이 SSG 페이지만 지원함을 나타냅니다.
```
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start"
},
```
## Next.js SSR 애플리케이션의 Amplify 빌드 설정
Amplify는 앱의 `package.json` 파일을 검사한 후 앱의 빌드 설정을 확인합니다. Amplify 콘솔이나 리포지토리 루트의 `amplify.yml` 파일에 빌드 설정을 저장할 수 있습니다. 자세한 내용은 [Amplify 애플리케이션의 빌드 설정 구성](build-settings.md) 섹션을 참조하세요.
Next.js SSR 앱을 배포하고 있는 것을 감지했으나 `amplify.yml` 파일이 없는 경우, Amplify는 앱에 대한 buildspec을 생성하고 `baseDirectory`를 `.next`로 설정합니다. `amplify.yml` 파일이 있는 곳에 앱을 배포하는 경우, 파일의 빌드 설정이 콘솔의 모든 빌드 설정을 재정의합니다. 따라서 파일에서 `baseDirectory`를 `.next`으로 수동 설정해야 합니다.
다음은 `baseDirectory`가 `.next`으로 설정된 앱의 빌드 설정 예시입니다. 이는 빌드 아티팩트가 SSG 및 SSR 페이지를 지원하는 Next.js 앱용임을 나타냅니다.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## Next.js 13 또는 이전 SSG 애플리케이션의 Amplify 빌드 설정
Amplify는 Next.js 13 또는 이전 SSG 앱이 배포되는 것을 감지하면 앱에 대한 빌드 사양을 생성하고 `baseDirectory`를 `out`으로 설정합니다. `amplify.yml` 파일이 있는 곳에 앱을 배포하는 경우, 파일에서 `baseDirectory`를 `out`으로 수동으로 설정해야 합니다. `out` 디렉터리는 Next.js가 내보낸 정적 자산을 저장하기 위해 생성하는 기본 폴더입니다. 앱의 빌드 사양 설정을 구성할 때 앱의 구성과 일치하도록 `baseDirectory` 폴더의 이름을 변경합니다.
다음은 빌드 아티팩트가 SSG 페이지만 지원하는 Next.js 13 또는 이전 앱에 대한 것임을 나타내도록 `baseDirectory`가 `out`으로 설정된 앱 빌드 설정의 예입니다.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: out
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## Next.js 14 이상 SSG 애플리케이션의 Amplify 빌드 설정
Next.js 버전 14에서는 `next export` 명령이 더 이상 사용되지 않고 `next.config.js` 파일에서 `output: 'export'`로 대체되어 정적 내보내기를 활성화합니다. 콘솔에서 Next.js 14 SSG 전용 애플리케이션을 배포하는 경우 Amplify는 앱의 빌드 사양을 생성하고 `baseDirectory`을 `.next`로 설정합니다. `amplify.yml` 파일이 있는 곳에 앱을 배포하는 경우, 파일에서 `baseDirectory`를 `.next`으로 수동으로 설정해야 합니다. 이는 Amplify가 SSG 및 SSR 페이지를 모두 지원하는 Next.js `WEB_COMPUTE` 애플리케이션에 사용하는 것과 동일한 `baseDirectory` 설정입니다.
다음은 `baseDirectory`가 `.next`로 설정된 Next.js 14 SSG 전용 앱 빌드 설정의 예입니다.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
# Next.js 11 SSR 앱을 Amplify Hosting 컴퓨팅으로 마이그레이션
새 Next.js 앱 배포 시 Amplify는 지원되는 가장 최신 버전의 Next.js를 기본으로 사용합니다. 현재 Amplify Hosting 컴퓨팅 SSR 공급자는 Next.js 버전 15를 지원합니다.
Amplify 콘솔에서는 Next.js 12부터 15 버전까지 완벽하게 지원하는 Amplify Hosting 컴퓨팅 서비스가 2022년 11월 릴리스되기 전에 배포된 앱을 사용자 계정에서 감지합니다. 이 콘솔은 Amplify의 이전 SSR 공급자인 Classic(Next.js 11만 해당)을 사용하여 배포된 브랜치가 있는 앱을 식별하는 정보 배너를 보여줍니다. Amplify Hosting 컴퓨팅 SSR 공급자로 앱을 마이그레이션하는 것이 좋습니다.
호스팅 중인 Next.js 11 애플리케이션을 Next.js 12 이상으로 업데이트하는 경우 배포가 트리거되면 `"target" property is no longer supported` 오류가 발생할 수 있습니다. 이 경우, 반드시 Amplify Hosting 컴퓨팅으로 마이그레이션해야 합니다.
앱과 모든 프로덕션 브랜치를 동시에 수동으로 마이그레이션해야 합니다. 앱은 Classic(Next.js 11만 해당)과 Next.js 12 이상 브랜치를 둘 다 포함할 수 없습니다.
다음 지침에 따라 앱을 Amplify Hosting 컴퓨팅 SSR 공급자로 마이그레이션합니다.
**앱을 Amplify Hosting 컴퓨팅 SSR 공급자로 마이그레이션하려면**
1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.
1. 마이그레이션하려는 Next.js 앱을 선택합니다.
**참고**
Amplify 콘솔에서 앱을 마이그레이션하기 전에 Next.js 12 또는 그 이후 버전을 사용할 수 있도록 먼저 앱의 package.json 파일을 업데이트해야 합니다.
1. 탐색 창에서 **앱 설정**, **일반**을 선택합니다.
1. 앱에 *Classic(Next.js 11만 해당)* **SSR 공급자**를 사용하여 배포한 브랜치가 있는 경우, 앱 홈페이지의 콘솔에 배너가 표시됩니다. 배너에서 **마이그레이션**을 선택합니다.
1. 마이그레이션 확인 창에서 세 개의 명령문을 선택하고 **마이그레이션**을 선택합니다.
1. Amplify가 앱을 빌드하고 재배포하여 마이그레이션을 완료할 것입니다.
## SSR 마이그레이션 되돌리기
Next.js 앱 배포 시 Amplify Hosting은 앱의 설정을 감지하고 앱의 내부 플랫폼 값을 설정합니다. 세 개의 유효한 플랫폼 값이 있습니다. SSG 앱의 플랫폼 값은 `WEB`으로 설정됩니다. Next.js 버전 11을 사용하는 SSR 앱의 플랫폼 값은 `WEB_DYNAMIC`으로 설정됩니다. Next.js 12 또는 그 이후 버전 SSR 앱의 플랫폼 값은 `WEB_COMPUTE`으로 설정됩니다.
이전 섹션의 지침에 따라 앱을 마이그레이션하면 Amplify는 앱의 플랫폼 값을 `WEB_DYNAMIC`에서 `WEB_COMPUTE`으로 변경합니다. Amplify Hosting 컴퓨팅으로 마이그레이션을 완료한 후에는 콘솔에서 마이그레이션을 되돌릴 수 없습니다. 마이그레이션을 되돌리려면 AWS Command Line Interface 을 사용하여 앱의 플랫폼을 `WEB_DYNAMIC`으로 다시 변경해야 합니다. 터미널 창을 열고 다음 명령을 입력하여 사용자의 고유 정보로 앱 ID와 리전을 업데이트합니다.
```
aws amplify update-app --app-id abcd1234 --platform WEB_DYNAMIC --region us-west-2
```
# 정적 Next.js 앱에 SSR 기능 추가
Amplify를 통해 배포된 기존 정적(SSG) Next.js 앱에 SSR 기능을 추가할 수 있습니다. SSG 앱을 SSR로 변환하는 프로세스를 시작하기 전에, Next.js 12 또는 그 이후 버전을 사용하도록 앱을 업데이트하고 SSR 기능을 추가합니다. 그런 다음, 다음 단계를 수행해야 합니다.
1. AWS Command Line Interface 를 사용하여 앱의 플랫폼 유형을 변경합니다.
1. 앱에 서비스 역할을 추가합니다.
1. 앱의 빌드 설정에서 출력 디렉터리를 업데이트합니다.
1. 앱이 SSR을 사용한다는 것을 나타내도록 앱의 `package.json` 파일을 업데이트합니다.
## 플랫폼 업데이트
플랫폼 유형에는 세 가지 유효한 값이 있습니다. SSG 앱의 플랫폼 유형은 `WEB`으로 설정됩니다. Next.js 버전 11을 사용하는 SSR 앱의 플랫폼 유형은 `WEB_DYNAMIC`으로 설정됩니다. Amplify Hosting 컴퓨팅이 관리하는 SSR을 사용하여 Next.js 12 이상에 배포된 앱의 경우, 플랫폼 유형이 `WEB_COMPUTE`으로 설정됩니다.
앱을 SSG 앱으로 배포한 경우, Amplify는 플랫폼 유형을 `WEB`으로 설정합니다. AWS CLI 를 사용하여 앱의 플랫폼을 로 변경합니다`WEB_COMPUTE`. 터미널 창을 열고 다음 명령을 입력하여 빨간색 텍스트를 사용자의 고유한 앱 ID 및 리전으로 업데이트합니다.
```
aws amplify update-app --app-id abcd1234 --platform WEB_COMPUTE --region us-west-2
```
## 서비스 역할 추가
서비스 역할은 Amplify가 사용자를 대신하여 다른 서비스를 호출할 때 수임하는 AWS Identity and Access Management (IAM) 역할입니다. Amplify를 통해 이미 배포된 SSG 앱에 서비스 역할을 추가하려면 다음 단계를 따릅니다.
**서비스 역할을 추가하려면**
1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.
1. Amplify 계정에 아직 서비스 역할을 생성하지 않은 경우 [서비스 역할 추가](amplify-service-role.md)를 참조하여 이 필수 단계를 완료합니다.
1. 서비스 역할을 추가할 정적 Next.js 앱을 선택합니다.
1. 탐색 창에서 **앱 설정**, **일반**을 선택합니다.
1. **앱 세부 정보** 페이지에서 **편집**을 선택합니다.
1. **서비스 역할**에서 기존 서비스 역할의 이름 또는 2단계에서 만든 서비스 역할의 이름을 선택합니다.
1. **저장**을 선택합니다.
## 빌드 설정 업데이트
SSR 기능을 사용하여 앱을 재배포하기 전에 출력 디렉토리가 `.next`으로 설정되도록 앱의 빌드 설정을 업데이트해야 합니다. Amplify 콘솔 또는 리포지토리에 저장된 `amplify.yml` 파일에서 빌드 설정을 편집할 수 있습니다. 자세한 내용은 [Amplify 애플리케이션의 빌드 설정 구성](build-settings.md) 섹션을 참조하세요.
다음은 `baseDirectory`가 `.next`으로 설정된 앱의 빌드 설정 예시입니다.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## package.json 파일 업데이트
서비스 역할을 추가하고 빌드 설정을 업데이트한 후 앱의 `package.json` 파일을 업데이트합니다. 다음 예제와 같이 Next.js 앱이 SSG 및 SSR 페이지를 모두 지원한다는 것을 나타내도록 빌드 스크립트를 `"next build"`로 설정합니다.
```
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
```
Amplify는 리포지토리의 `package.json` 파일 변경을 감지하고 SSR 기능을 사용하여 앱을 재배포합니다.
# 환경 변수가 서버 측 런타임에 액세스할 수 있도록 만들기
Amplify Hosting은 Amplify 콘솔의 프로젝트 구성에 환경 변수를 설정하여 애플리케이션 빌드에 환경 변수를 추가할 수 있도록 지원합니다.
하지만 Next.js 서버 구성 요소는 기본적으로 이러한 환경 변수에 액세스할 수 없습니다. 이는 애플리케이션이 빌드 단계에서 사용하는 환경 변수에 저장된 모든 암호를 보호하기 위한 것입니다.
특정 환경 변수가 Next.js에 액세스할 수 있도록 하려면 Next.js가 인식하는 환경 파일에 해당 변수를 설정하도록 Amplify 빌드 사양 파일을 수정하면 됩니다. 이를 통해 Amplify는 애플리케이션을 빌드하기 전에 이러한 환경 변수를 로드할 수 있습니다.
**중요**
배포 아티팩트에 액세스할 수 있는 사용자가 환경 변수를 읽을 수 있으므로, 환경 변수에 자격 증명, 보안 암호 정보 또는 민감한 정보를 저장하지 않는 것을 강력히 권장합니다.
SSR 컴퓨팅 함수에 AWS 리소스에 대한 액세스 권한을 부여하려면 [IAM 역할을 사용하는](amplify-SSR-compute-role.md) 것이 좋습니다.
다음 빌드 사양 예제는 빌드 명령 섹션에 환경 변수를 추가하는 방법을 보여줍니다.
```
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env | grep -e API_BASE_URL >> .env.production
- env | grep -e NEXT_PUBLIC_ >> .env.production
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
- .next/cache/**/*
```
이 예제의 빌드 명령 섹션에는 애플리케이션 빌드가 실행되기 전에 `.env.production` 파일에 환경 변수를 쓰는 두 개의 명령이 포함되어 있습니다. Amplify Hosting은 애플리케이션이 트래픽을 수신할 때 애플리케이션이 이러한 변수에 액세스할 수 있도록 합니다.
이전 예제에서 빌드 명령 섹션의 다음 줄은 빌드 환경에서 특정 변수를 가져와 `.env.production` 파일에 추가하는 방법을 설명합니다.
```
- env | grep -e API_BASE_URL -e APP_ENV >> .env.production
```
변수가 빌드 환경에 있는 경우, `.env.production` 파일에는 다음과 같은 환경 변수가 포함됩니다.
```
API_BASE_URL=localhost
APP_ENV=dev
```
이전 예제에서 빌드 명령 섹션의 다음 줄은 특정 접두사가 있는 환경 변수를 `.env.production` 파일에 추가하는 방법을 설명합니다. 이 예제에서는 접두사 `NEXT_PUBLIC_`이 있는 모든 변수를 추가합니다.
```
- env | grep -e NEXT_PUBLIC_ >> .env.production
```
빌드 환경에 접두사 `NEXT_PUBLIC_`이 있는 변수가 여러 개 있는 경우 `.env.production` 파일은 다음과 유사하게 표시됩니다.
```
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
NEXT_PUBLIC_GRAPHQL_ENDPOINT=uowelalsmlsadf
NEXT_PUBLIC_FEATURE_FLAG=true
```
## 모노레포용 SSR 환경 변수
모노레포에 SSR 앱을 배포하고 특정 환경 변수가 Next.js에 액세스할 수 있도록 하려면 `.env.production` 파일에 애플리케이션 루트 접두사를 붙여야 합니다. Nx 모노레포 내의 Next.js 앱에 대한 다음 빌드 사양 예제는 빌드 명령 섹션에 환경 변수를 추가하는 방법을 보여줍니다.
```
version: 1
applications:
- frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
- npx nx build app
artifacts:
baseDirectory: dist/apps/app/.next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
buildPath: /
appRoot: apps/app
```
이전 예제의 빌드 명령 섹션에 있는 다음 줄은 빌드 환경에서 특정 변수를 가져와 모노레포 내의 앱에 대한 `.env.production` 파일(애플리케이션 루트 `apps/app`)에 추가하는 방법을 설명합니다.
```
- env | grep -e API_BASE_URL -e APP_ENV >> apps/app/.env.production
- env | grep -e NEXT_PUBLIC_ >> apps/app/.env.production
```
# 모노레포 Next.js 앱 배포
Amplify는 일반 모노레포 앱뿐만 아니라 npm 워크스페이스, pnpm 워크스페이스, Yarn 워크스페이스, Nx 및 Turborepo를 사용하여 생성된 모노레포 앱을 지원합니다. 앱 배포 시 Amplify는 사용 중인 모노레포 빌드 프레임워크를 자동으로 감지합니다. Amplify는 npm 워크스페이스, Yarn 워크스페이스 또는 Nx의 앱에 대한 빌드 설정을 자동으로 적용합니다. Turborepo와 pnpm 앱에는 추가 구성이 필요합니다. 자세한 내용은 [모노레포 빌드 설정 구성](monorepo-configuration.md) 단원을 참조하십시오.
Nx에 대한 자세한 예제는 [AWS Amplify Hosting을 통해 Nx를 사용하는 Next.js 앱 간 코드 공유](https://aws.amazon.com/blogs/mobile/share-code-between-next-js-apps-with-nx-on-aws-amplify-hosting/) 블로그 게시물을 참조하세요.