[카테고리:] nextjs

1. 서론

모던 웹 개발에서 주목받고 있는 Next.js와 Nest.js는 각각 React와 Node.js의 강력한 도구입니다. Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크이며, Nest.js는 효율적인 서버 사이드 애플리케이션을 만들 수 있도록 돕는 프레임워크입니다. 본 강좌에서는 Next.js와 Nest.js 애플리케이션을 배포하는 방법, 환경변수 설정, 빌드 최적화 방법에 대해 살펴보겠습니다.

2. Next.js 배포하기

2.1. Next.js 애플리케이션 빌드하기

Next.js 애플리케이션을 배포하기 전에 먼저 빌드해야 합니다. 배포 시 빌드 버전을 생성하기 위해 다음 명령어를 실행합니다:

npm run build

이 명령어를 통해 .next 디렉터리에 최적화된 빌드가 생성됩니다. 이 빌드를 서버에 배포하여 실제 서비스를 제공할 수 있습니다.

2.2. Next.js 배포 방법

2.2.1. Vercel을 사용한 배포

Next.js는 Vercel이 만든 프레임워크이므로, Vercel을 통해 배포하는 것이 가장 간단합니다. Vercel에 회원가입한 후 새로운 프로젝트를 생성하고 GitHub 또는 GitLab 레포지토리를 선택하세요. Vercel은 자동으로 애플리케이션을 감지하고 배포할 준비를 합니다.

2.2.2. 넷리파이(Netlify) 사용하기

넷리파이는 정적 사이트와 서버리스 기능을 갖춘 인기 있는 호스팅 서비스입니다. Netlify 버튼을 클릭하여 연결한 후, Build Command를 npm run build, Publish Directory를 out로 설정한 후 배포를 시작할 수 있습니다.

2.2.3. AWS에 배포하기

AWS Elastic Beanstalk를 사용해 Next.js 애플리케이션을 배포할 수도 있습니다. Elastic Beanstalk 환경을 생성하고, Docker 또는 Node.js 플랫폼을 선택하여 애플리케이션을 업로드하면 됩니다.

3. Nest.js 배포하기

3.1. Nest.js 애플리케이션 빌드하기

Nest.js 애플리케이션을 배포하기 위해 다음 명령어를 사용해 빌드합니다:

npm run build

이 명령어는 dist 디렉터리에 컴파일된 JavaScript 파일을 생성합니다.

3.2. Nest.js 배포 방법

3.2.1. Heroku를 통한 배포

Heroku는 빠르게 애플리케이션을 배포하기에 적합한 클라우드 플랫폼입니다. Heroku CLI를 사용해 애플리케이션을 생성한 후, git push heroku main 명령어로 배포할 수 있습니다.

3.2.2. AWS EC2에 배포하기

AWS EC2 인스턴스에 Nest.js 애플리케이션을 배포하려면 Node.js 및 Git을 설치하고, 필요한 종속성을 설치한 후, 애플리케이션을 클론하여 실행합니다.

3.2.3. Docker를 사용한 배포

Nest.js 애플리케이션을 Docker 컨테이너로 감싸서 배포하면, 환경에 구애받지 않고 실행할 수 있습니다. Dockerfile을 작성한 후, docker build 명령어로 이미지를 생성하고, docker run 명령어로 컨테이너를 실행합니다.

4. 환경변수 설정

4.1. Next.js 환경변수 설정

Next.js에서는 .env.local 파일을 사용하여 비밀 정보를 저장할 수 있습니다. 예를 들어, API 키나 데이터베이스 연결 문자열을 정의할 수 있습니다:

DATABASE_URL=my_database_url

환경변수는 process.env.DATABASE_URL을 통해 접근할 수 있습니다. Next.js는 환경변수가 NEXT_PUBLIC_로 시작하지 않는 경우 클라이언트 사이드에서 접근할 수 없도록 설정합니다.

4.2. Nest.js 환경변수 설정

Nest.js에서는 @nestjs/config 패키지를 사용하면 환경변수 관리가 편리해집니다. 다음과 같이 설치하고 설정할 수 있습니다:

npm install @nestjs/config

그 후, ConfigModule을 애플리케이션 모듈에 추가하고, .env 파일을 사용하여 환경변수를 설정합니다:

DATABASE_URL=my_database_url

그 후, this.configService.get('DATABASE_URL')를 사용해 환경변수에 접근합니다.

5. 빌드 최적화 방법

5.1. Next.js 빌드 최적화

Next.js의 성능을 최적화하기 위해 몇 가지 방법이 있습니다:

• 서버 컴포넌트와 클라이언트 컴포넌트를 구분: 서버 사이드 렌더링을 필요로 하지 않는 컴포넌트들은 클라이언트 컴포넌트로 변환하여 성능을 극대화합니다.
• 이미지 최적화: next/image 컴포넌트를 사용하여 이미지의 크기를 자동으로 조정하고 웹 퍼포먼스를 향상시킵니다.
• 라우팅 최적화: 동적 라우팅을 사용하고, 필요하지 않은 페이지는 next/link를 사용하여 필요 시에만 로드할 수 있습니다.

5.2. Nest.js 빌드 최적화

Nest.js 앱의 성능 최적화를 위한 전략으로는 다음과 같습니다:

• AOT 컴파일 사용: Ahead-of-Time 컴파일을 사용하면 런타임 성능을 향상시키고 빌드 크기를 줄일 수 있습니다.
• 모듈 분할: 대규모 애플리케이션에서 모듈을 잘 분리해 코드의 가독성과 재사용성을 높입니다.
• 캐싱 전략: 데이터베이스 쿼리 결과를 캐시하여 성능을 최적화합니다. Redis와 같은 캐싱 솔루션을 사용하는 것이 좋습니다.

6. 결론

Next.js와 Nest.js는 각각 클라이언트 사이드와 서버 사이드에서 매력적인 옵션입니다. 이 강좌를 통해 두 프레임워크의 배포 방법, 환경변수 설정, 빌드 최적화 방법을 살펴보았습니다. 이를 통해 효율적이고 성능이 뛰어난 웹 애플리케이션을 개발하는 데 큰 도움이 되기를 바랍니다.

최근 웹 개발의 트렌드에서 Next.js와 Nest.js는 각각 프론트엔드 및 백엔드 개발에서 매우 인기가 있습니다. Next.js는 React 기반의 프레임워크로 SEO 친화적인 서버 사이드 렌더링(SSR)을 지원하며, Nest.js는 타입스크립트를 사용하여 효율적인 서버 애플리케이션을 구축하는 데 최적화된 프레임워크입니다. 이번 글에서는 Next.js와 Nest.js를 결합하여 기본 프로젝트 구조를 만들고, TypeScript 설정 및 기본적인 디렉토리 구조에 대해 자세히 살펴보겠습니다.

1. Next.js 소개

Next.js는 React 애플리케이션을 위한 강력한 프레임워크로, 다양한 기능을 제공합니다. 다음은 Next.js의 주요 특징입니다:

• 서버 사이드 렌더링(SSR): SEO와 초기 로딩 성능 향상을 위해 페이지를 서버에서 렌더링합니다.
• 정적 사이트 생성(SSG): 정적 파일 생성으로 빠른 퍼포먼스를 제공합니다.
• API 라우트: 간단한 API를 서버에서 구축할 수 있습니다.
• 자동 코드 분할: 페이지에 필요한 자바스크립트 코드만 로드합니다.

2. Nest.js 소개

Nest.js는 Node.js에서 서버 애플리케이션을 구축하기 위한 프레임워크로, TypeScript를 사용하여 생산성을 높입니다. Nest.js의 특징은 다음과 같습니다:

• 모듈화: 코드 구조를 개선하고 관리하기 쉽게 합니다.
• 의존성 주입: 서비스 간의 의존성을 쉽게 관리할 수 있습니다.
• 확장성: 필요에 따라 모듈을 추가하여 기능을 확장할 수 있습니다.
• 테스트 용이성: 코드를 단위 테스트하기 쉽게 구조화되어 있습니다.

3. 프로젝트 생성

이제 Next.js와 Nest.js가 설치된 개발 환경을 설정해보겠습니다. 각 프레임워크의 프로젝트를 생성하고 기본적인 디렉토리 구조를 설명하겠습니다.

3.1 Next.js 프로젝트 생성

npx create-next-app@latest my-next-app --typescript

위의 명령어를 터미널에 입력하여 Next.js 프로젝트를 생성합니다. my-next-app은 프로젝트 이름이며, 필요에 따라 변경할 수 있습니다.

3.2 Nest.js 프로젝트 생성

npm i -g @nestjs/cli
nest new my-nest-app

위의 명령어를 사용하여 Nest.js 프로젝트를 생성합니다. my-nest-app이 프로젝트 이름입니다. 안정성을 위해 npm이 아닌 yarn을 사용할 수도 있습니다.

4. TypeScript 설정

Next.js와 Nest.js 두 프로젝트 모두 TypeScript를 사용하여 작성할 수 있습니다. 기본적으로 Next.js에서 TypeScript를 설치하면 tsconfig.json 파일이 생성됩니다. Nest.js도 마찬가지로 기본적으로 TypeScript로 설정되어 있습니다.

4.1 Next.js TypeScript 설정

Next.js는 TypeScript 설정이 이미 포함되어 있으므로, 아래 파일을 수정하거나 추가하여 추가 설정을 할 수 있습니다.

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "baseUrl": "."
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

4.2 Nest.js TypeScript 설정

Nest.js에서는 프로젝트 기본 구성이 TypeScript를 사용하도록 되어 있습니다. tsconfig.json 파일도 기본적으로 다음과 같이 설정되어 있습니다:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "lib": ["es6", "dom"],
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules", "dist"]
}

5. 기본 디렉토리 구성

Next.js와 Nest.js 프로젝트 각각의 기본 디렉토리 구조를 알아보겠습니다.

5.1 Next.js 기본 디렉토리 구성

Next.js 프로젝트의 기본 디렉토리 구조는 다음과 같습니다:

my-next-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── vercel.svg
│   └── ...
├── src/
│   ├── pages/
│   ├── components/
│   └── styles/
├── .gitignore
├── package.json
├── tsconfig.json
├── next.config.js
└── README.md

각 디렉토리의 역할은 다음과 같습니다:

• public: 정적 파일을 저장하는 디렉토리입니다. 이미지, 폰트 등 클라이언트에서 직접 접근할 수 있는 파일을 저장합니다.
• src/pages: Next.js에서 페이지를 정의하는 디렉토리입니다. 각 파일 이름이 URL 경로로 매핑됩니다.
• src/components: 재사용 가능한 컴포넌트를 정의하는 디렉토리입니다.
• src/styles: CSS 파일 및 스타일 관련 파일을 저장합니다.
• next.config.js: Next.js 설정 파일입니다. 필요한 모든 구성 설정을 여기에 추가할 수 있습니다.

5.2 Nest.js 기본 디렉토리 구성

Nest.js 프로젝트의 기본 디렉토리 구조는 다음과 같습니다:

my-nest-app/
├── node_modules/
├── src/
│   ├── app.module.ts
│   ├── app.controller.ts
│   ├── app.service.ts
│   └── main.ts
├── test/
├── .eslintrc.js
├── package.json
├── tsconfig.json
├── jest.config.js
└── README.md

각 디렉토리의 역할은 다음과 같습니다:

• src: 애플리케이션의 소스 코드가 위치하는 디렉토리입니다.
• app.module.ts: 애플리케이션의 루트 모듈입니다. 다른 모듈을 불러오고 관리합니다.
• app.controller.ts: 라우팅과 관련된 요청을 처리하는 컨트롤러입니다.
• app.service.ts: 비즈니스 로직을 처리하는 서비스입니다.
• main.ts: 애플리케이션 진입점입니다. 서버를 시작하는 코드가 위치합니다.

6. 결론

이번 글에서는 Next.js와 Nest.js의 기본적인 프로젝트 구조를 설정하고, TypeScript 설정과 기본 디렉토리 구성에 대해 알아보았습니다. 두 프레임워크를 함께 사용하면 강력한 풀스택 애플리케이션을 효과적으로 구축할 수 있습니다. 이러한 기본 구조를 통해 더 나아가 복잡한 애플리케이션을 개발할 수 있으며, 실전에서 유용하게 사용할 수 있을 것입니다.

이제 여러분은 Next.js와 Nest.js를 활용하여 개발을 시작할 준비가 되었습니다! 더 깊이 있는 내용을 원하신다면, 두 프레임워크에 대한 공식 문서 및 추가 강좌를 참고하시기 바랍니다.

웹 애플리케이션의 성능은 사용자 경험을 결정짓는 중요한 요소 중 하나입니다. 특히, 데이터에 의존하는 애플리케이션에서는 데이터의 요청 처리 속도가 애플리케이션의 전반적인 성능에 큰 영향을 미칩니다. 본 강좌에서는 Next.js와 Nest.js를 이용한 API 캐싱과 성능 최적화 기법에 대해 자세히 알아보겠습니다. 특히, Next.js에서 getStaticProps와 SWR을 활용한 캐싱 방법을 중점적으로 설명할 것입니다.

1. API 캐싱의 개념

API 캐싱은 클라이언트가 서버로부터 데이터를 요청할 때, 서버에서 직접적으로 데이터를 생성하지 않고 미리 저장된 데이터를 사용하는 기법입니다. 이러한 방식은 데이터 요청 시의 지연 시간(latency)을 줄이고 서버의 부하를 감소시키는 장점이 있습니다. API 캐싱 전략으로는 다양한 방법이 있지만, 가장 흔한 방법으로는 메모리 캐싱, 파일 캐싱, 그리고 데이터베이스 캐싱이 있습니다.

2. Nest.js에서 API 캐싱 구현하기

Nest.js는 Node.js 기반의 프레임워크로, 서버 측 애플리케이션을 구축할 때 매우 유용합니다. Nest.js에서는 API 캐싱을 쉽게 구현할 수 있는 몇 가지 방법을 제공합니다. 가장 기본적인 방법 중 하나는 CacheModule을 사용하는 것입니다.

typescript
import { CacheModule, Module } from '@nestjs/common';
import { AppService } from './app.service';
import { AppController } from './app.controller';

@Module({
  imports: [CacheModule.register()],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

위의 코드에서 CacheModule.register()를 통해 캐시 모듈을 설정합니다. 이후, 서비스를 생성하여 API 요청을 처리할 때 캐시를 활용할 수 있습니다.

typescript
import { Injectable, Cacheable } from '@nestjs/common';

@Injectable()
export class AppService {
  @Cacheable()
  getData() {
    // 데이터베이스 또는 외부 API 호출
    return ;
  }
}

3. Next.js에서 데이터 가져오기

Next.js는 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-side Rendering) 기능을 제공하여 다양한 데이터 가져오기 방식을 제공합니다. getStaticProps는 정적 생성을 위해 사용되는 함수로, 페이지가 빌드될 때 데이터를 미리 가져와서 HTML 파일로 생성합니다. 이렇게 생성된 페이지는 빠르게 로드됩니다.

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const jsonData = await data.json();

  return {
    props: {
      data: jsonData,
    },
  };
}

이러한 방식은 빈번하게 변경되지 않는 데이터를 다룰 때 매우 유용합니다. 이 때 각 페이지의 캐시 수명을 설정하여 성능을 더욱 최적화할 수 있습니다.

4. SWR을 이용한 데이터 패칭

SWR은 React Hook을 활용한 데이터 패칭 라이브러리로, 클라이언트 사이드에서 데이터를 캐싱할 수 있는 강력한 도구입니다. SWR을 사용하면 API 요청의 복잡성을 최소화하고, 새로운 데이터를 자동으로 재검증할 수 있습니다.

javascript
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function Component() {
  const { data, error } = useSWR('https://api.example.com/data', fetcher);

  if (error) return 
Failed to load
;
  if (!data) return 
Loading...
;

  return 
{JSON.stringify(data)}
;
}

SWR은 기본적으로 재검증을 위한 캐싱 및 속도를 제공합니다. 이러한 방식은 사용자 경험을 향상시키며, API 요청 수를 최소화합니다.

5. Next.js와 Nest.js의 성능 최적화 기법

Next.js와 Nest.js를 함께 사용하여 애플리케이션의 성능을 최적화할 수 있는 여러 가지 방법이 있습니다.

• 정적 생성(Static Generation): Next.js의 getStaticProps를 사용하여 페이지 빌드 시에 데이터를 미리 가져오는 방식.
• 서버 사이드 렌더링(Server-side Rendering): 필요한 경우, 특히 사용자 맞춤형 데이터를 요구하는 페이지에서 getServerSideProps를 사용.
• API 캐싱: Nest.js의 CacheModule을 사용하여 데이터 요청 시 캐시된 데이터를 활용.
• SWR: 클라이언트 사이드에서 데이터 패칭과 캐싱을 동시에 처리하여 사용자 경험을 개선.

6. 결론

Next.js와 Nest.js의 결합은 현대 웹 애플리케이션 개발에서 많은 이점을 제공합니다. 특히, 데이터 요청을 최적화하고 성능을 극대화하기 위해 다양한 캐싱 전략을 활용하는 것이 중요합니다. 이 글에서는 API 캐싱의 기본 개념부터 Nest.js와 Next.js의 적용 방법까지 자세히 다루었습니다. 따라서, 이러한 기술들을 통해 복잡한 웹 애플리케이션을 보다 효율적으로 개발할 수 있을 것입니다.

여러분의 웹 애플리케이션 성능 최적화에 이 글이 도움이 되기를 바랍니다!

현대 웹 애플리케이션에서 다국어 지원은 필수적입니다. 사용자 경험을 향상시키고 더 많은 사용자에게 다가갈 수 있는 기회를 제공합니다. 특히 글로벌 시장에서 경쟁력을 유지하기 위해서는 로컬라이제이션(Localization)과 국제화(Internationalization)의 중요성을 인식해야 합니다. 이번 글에서는 Next.js의 i18n 기능을 이용하여 어떻게 다국어 지원을 구현할 수 있는지 자세히 살펴보겠습니다.

1. 국제화(Internationalization)와 로컬라이제이션(Localization)의 이해
국제화(Internationalization, i18n)는 소프트웨어가 다양한 언어와 지역을 지원할 수 있도록 설계하는 과정입니다. 반면에, 로컬라이제이션(Localization, l10n)은 특정 언어 및 문화에 맞게 소프트웨어를 조정하는 과정을 의미합니다. 예를 들어, 프랑스어로 된 버전의 애플리케이션은 프랑스의 문화적 맥락과 어휘를 반영해야 하며, 이는 로컬라이제이션입니다.
2. Next.js의 기본 개념
Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 웹 사이트 생성(SSG)을 쉽게 구현할 수 있도록 돕습니다. 또한 Next.js는 파일 기반 라우팅, API 경로 및 보고서 좋은 성능으로 많은 개발자들에게 인기를 끌고 있습니다. Next.js의 i18n 기능은 기존의 이점을 활용하여 다국어 지원을 쉽게 수행할 수 있게 해줍니다.
3. Next.js의 i18n 기능 소개
Next.js에서는 `next.config.js` 파일을 통해 국제화 설정을 간단하게 구성할 수 있습니다. i18n 기능은 페이지별로 기본 언어를 설정하고, 각 언어에 대한 약어를 정의하며, 사용자가 언어를 선택할 수 있도록 도와줍니다.
module.exports = {
i18n: {
locales: ['en-US', 'ko-KR', 'fr-FR'],
defaultLocale: 'en-US',
},
}
4. 다국어 지원을 위한 구조 설계
다국어 지원을 위한 최상의 접근 방식 중 하나는 언어별로 리소스를 모듈화하여 저장하는 것입니다. 일반적으로 JSON 파일을 활용하여 각 언어에 맞는 텍스트를 정의합니다. 이렇게 함으로써 유지보수가 용이하고 코드의 가독성을 높일 수 있습니다.
// locales/en-US.json
{
"welcome": "Welcome",
"description": "This is an example of i18n with Next.js."
}
// locales/ko-KR.json
{
"welcome": "환영합니다",
"description": "이는 Next.js의 i18n 예제입니다."
}
// locales/fr-FR.json
{
"welcome": "Bienvenue",
"description": "Ceci est un exemple d'i18n avec Next.js."
}
5. 언어 리소스 가져오기
언어 파일을 가져오기 위해서, React의 훅을 이용한 간단한 커스텀 훅을 만들 수 있습니다. 이 훅은 현재 언어에 따라 적절한 메시지를 반환합니다.
import { useRouter } from 'next/router';
import en from '../locales/en-US.json';
import ko from '../locales/ko-KR.json';
import fr from '../locales/fr-FR.json';
const translations = {
'en-US': en,
'ko-KR': ko,
'fr-FR': fr,
};
export const useTranslation = () => {
const { locale } = useRouter();
const t = (key) => translations[locale][key] || key;
return { t };
};
6. 컴포넌트에서 다국어 지원 적용하기
이제 컴포넌트에서 위에서 만든 `useTranslation` 훅을 사용하여 다국어 지원을 적용할 수 있습니다. 예를 들어, 다음과 같은 코드로 환영 메시지를 표시할 수 있습니다.
import React from 'react';
import { useTranslation } from '../hooks/useTranslation';
const Welcome = () => {
const { t } = useTranslation();
return (
{t('welcome')}
{t('description')}

);
};
export default Welcome;
7. 언어 변경 기능 구현하기
사용자가 웹 애플리케이션의 언어를 변경할 수 있도록 하려면, 언어 선택 버튼을 추가하여 이를 처리하는 기능을 구현할 수 있습니다. Next.js에서는 “ 컴포넌트를 사용하여 언어 변경을 쉽게 처리할 수 있습니다.
import Link from 'next/link';
import { useRouter } from 'next/router';
const LanguageSwitcher = () => {
const { locales, locale } = useRouter();
return (
{locales.map((lng) => (



))}

);
};
export default LanguageSwitcher;
8. Next.js API Route에서의 다국어 지원
Next.js의 API Route에서도 다국어 지원을 추가할 수 있습니다. API Route에서 언어를 파라미터로 받아 적절한 메시지를 반환하는 구조를 만들 수 있습니다.
// pages/api/message.js
export default function handler(req, res) {
const { locale } = req.query;
const messages = {
'en-US': 'Hello!',
'ko-KR': '안녕하세요!',
'fr-FR': 'Bonjour!',
};
res.status(200).json({ message: messages[locale] || messages['en-US'] });
}
9. 최적화 및 SEO를 고려한 다국어 지원
다국어 웹사이트에서 SEO를 최적화하기 위해서는 hreflang 태그를 사용하는 것이 좋습니다. 이를 통해 검색 엔진이 페이지의 언어 및 지역 정보를 이해할 수 있도록 돕습니다. Next.js에서는 `next/head`를 사용해 이를 구현할 수 있습니다.
import Head from 'next/head';
const MyPage = () => {
return (
<>





Hello World

);
};
export default MyPage;

10. 결론
Next.js의 i18n 기능을 사용하면 다국어 지원을 효율적으로 구현할 수 있습니다. 국제화와 로컬라이제이션의 차이를 이해하고, 각 언어별로 리소스를 관리하는 방법을 배우면 사용자 경험을 극대화할 수 있습니다. 올바른 설계를 통해 여러분의 Next.js 애플리케이션은 글로벌 사용자에게도 손쉽게 접근할 수 있는 플랫폼이 될 것입니다. 이제 다른 문화와 언어를 가진 사용자를 위한 웹 애플리케이션을 만들 기회를 잡아보세요!
11. 참고 자료
Next.js i18n Documentation
i18next for React
MDN: The Language Header

Next.js는 React 기반의 프레임워크로서 SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성) 기능을 제공합니다. 이러한 기능을 활용하면 사용자 경험을 극대화하고 SEO(검색 엔진 최적화)를 개선할 수 있습니다. 본 글에서는 Next.js에서 동적 라우팅과 페이지 생성 방법을 자세히 살펴보도록 하겠습니다.

1. Next.js의 라우팅 개요

Next.js의 라우팅은 파일 기반 시스템으로 작동합니다. 페이지 파일(예: .js, .ts)은 pages 디렉토리 내에 생성되며, 각 파일의 경로가 URL 경로와 매핑됩니다. 이러한 방식은 개발자가 쉽게 페이지를 추가하고 관리할 수 있도록 돕습니다.

Next.js에서는 두 가지 유형의 페이지를 생성할 수 있습니다: 정적 페이지와 동적 페이지. 정적 페이지는 미리 생성된 HTML로서, 주로 변하지 않는 데이터를 표시하는 데 적합합니다. 동적 페이지는 URL 파라미터를 기반으로 데이터를 불러오는 페이지로서, 사용자가 입력한 값에 따라 변화하는 내용을 표시합니다.

2. 정적 페이지 생성

정적 페이지는 getStaticProps 메서드를 통해 데이터를 가져와서 미리 생성할 수 있습니다. 이 메서드는 빌드 시간에 실행되며, 페이지가 요청될 때 HTML 페이지가 즉시 제공됩니다.

export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    
    return {
        props: {
            data,
        },
    };
}

const StaticPage = ({ data }) => {
    return (
        <div>
            <h1>정적 페이지</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

export default StaticPage;
        

위의 예제에서 getStaticProps는 API로부터 데이터를 가져와서 페이지 컴포넌트에 props로 전달합니다. 이 페이지는 빌드 시에만 생성되며, 매번 요청 시마다 데이터가 업데이트되지 않습니다.

3. 동적 페이지 생성

동적 페이지는 URL 경로의 일부에 변수를 사용하여 생성할 수 있습니다. 이러한 경우, getStaticPaths 메서드와 함께 사용됩니다. 이 메서드는 동적으로 생성할 페이지의 경로를 반환합니다.

export async function getStaticPaths() {
    const res = await fetch('https://api.example.com/items');
    const items = await res.json();
    
    const paths = items.map(item => ({
        params: { id: item.id.toString() }
    }));
    
    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const res = await fetch(`https://api.example.com/items/${params.id}`);
    const data = await res.json();

    return {
        props: {
            data,
        },
    };
}

const DynamicPage = ({ data }) => {
    return (
        <div>
            <h1>동적 페이지 - {data.title}</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

export default DynamicPage;
        

getStaticPaths는 동적으로 생성할 페이지의 경로를 미리 정의합니다. 각 경로는 getStaticProps를 통해 해당 페이지에 필요한 데이터를 가져오는 데 사용됩니다. 이 구조를 통해 SEO 최적화가 가능하며, 사용자에게는 빠른 페이지 로딩 경험을 제공합니다.

4. 동적 라우팅 실습

이제 간단한 예제를 통해 동적 라우팅을 실습해보겠습니다. 여기서는 ‘상품’ 목록과 각 상품의 상세 정보를 보여주는 간단한 웹 애플리케이션을 만들어 보겠습니다.

4.1 폴더 구조

/pages
  /products
    [id].js
  index.js
        

4.2 상품 목록 페이지

export async function getStaticProps() {
    const res = await fetch('https://api.example.com/products');
    const products = await res.json();

    return {
        props: {
            products,
        },
    };
}

const Products = ({ products }) => {
    return (
        <div>
            <h1>상품 목록</h1>
            <ul>
                {products.map(product => (
                    <li key={product.id}>
                        <a href={`/products/${product.id}`}>{product.name}</a>
                    </li>
                ))}</ul>
        </div>
    );
};

export default Products;
        

위의 코드는 상품 목록을 표시하는 페이지입니다. 각 상품은 링크로 연결되어 있습니다. 사용자가 링크를 클릭하면 해당 상품의 상세 페이지로 이동합니다.

4.3 상품 상세 페이지

export async function getStaticPaths() {
    const res = await fetch('https://api.example.com/products');
    const products = await res.json();

    const paths = products.map(product => ({
        params: { id: product.id.toString() }
    }));
    
    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const res = await fetch(`https://api.example.com/products/${params.id}`);
    const product = await res.json();

    return {
        props: {
            product,
        },
    };
}

const ProductPage = ({ product }) => {
    return (
        <div>
            <h1>상품 상세 페이지 - {product.name}</h1>
            <p>가격: {product.price}</p>
            <p>설명: {product.description}</p>
        </div>
    );
};

export default ProductPage;
        

상품의 상세 페이지는 URL 파라미터를 통해 특정 상품의 정보를 보여줍니다. 사용자가 상품 목록에서 링크를 클릭하면 해당 상품의 정보를 불러와 화면에 렌더링합니다.

5. 동적 라우팅의 이점

동적 라우팅은 많은 양의 페이지를 자동으로 생성할 수 있는 유용한 방법입니다. 예를 들어, 블로그 포스트, 상품 목록, 사용자 프로필 등 다양한 유형의 콘텐츠에 적용할 수 있습니다.

또한, SSR 및 SSG 기능을 활용하여 SEO 최적화와 빠른 페이지 로딩 속도를 동시에 달성할 수 있습니다.

6. 결론

Next.js는 파일 기반 라우팅을 통해 동적 페이지 생성 방식을 제공하여 개발자가 효율적으로 애플리케이션을 구축할 수 있도록 도와줍니다.

본 글에서는 정적 페이지와 동적 페이지 생성의 차이점, 그리고 각각의 생성 방법을 소개했습니다. 동적 라우팅 이론과 예제를 통해 여러분의 Next.js 프로젝트에 도움이 되기를 바랍니다.

Next.js의 동적 페이지 생성 기능을 잘 활용하면 SEO와 사용자 경험 모두를 향상시킬 수 있으며, 다양한 웹 애플리케이션의 요구에 맞출 수 있습니다. 더 많은 내용을 알고 싶으시다면 공식 문서를 참조하시기 바랍니다.