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

현대 웹 애플리케이션은 성능과 보안을 우선시하며, 이를 달성하기 위해 다양한 기술 스택과 구조를 사용합니다. 특히 Nest.js와 Next.js는 이러한 요구 사항을 충족시키기 위해 인기 있는 프레임워크입니다. 본 글에서는 Nest.js와 Next.js에서 미들웨어와 가드를 사용하는 방법에 대해 자세히 설명하고, Next.js에서 API 요청 시 미들웨어를 적용하는 과정을 살펴보도록 하겠습니다.

1. Nest.js의 Middleware 이해하기

Nest.js는 Node.js 기반의 프레임워크로, TypeScript로 작성된 애플리케이션을 개발하는 데 유용하며, 미들웨어를 통해 요청-응답 사이클을 제어할 수 있습니다. 미들웨어는 프레임워크의 요청과 응답이 처리되는 과정에서 특정 로직을 실행할 수 있도록 해줍니다.

1.1 Middleware의 작동 원리

미들웨어는 주로 다음과 같은 기능을 수행합니다:

• 요청 데이터의 변환
• 인증 및 권한 검사
• 로깅
• 오류 처리

1.2 Nest.js에서 Middleware 구현하기

Nest.js에서 미들웨어를 구현하기 위한 기본적인 코드 예시는 다음과 같습니다.

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

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
    use(req: Request, res: Response, next: Function) {
        console.log('Request...');
        next();
    }
}

위 코드는 요청이 들어올 때마다 로그를 출력하는 간단한 미들웨어입니다. 이를 애플리케이션에 적용하려면 해당 미들웨어를 모듈에 등록해야 합니다.

1.3 Middleware 등록하기

미들웨어는 app.module.ts 파일 또는 특정 모듈 파일에 등록할 수 있습니다.

import { Module, MiddlewareConsumer } from '@nestjs/common';
import { LoggerMiddleware } from './logger.middleware';

@Module({
    // ...
})
export class AppModule {
    configure(consumer: MiddlewareConsumer) {
        consumer
            .apply(LoggerMiddleware)
            .forRoutes('*'); // 모든 경로에 미들웨어 적용
    }
}

2. Nest.js에서 Guard의 역할

Nest.js의 Guard는 요청을 처리하기 전에 특정 조건을 검사하는 데 사용됩니다. 주로 인증 및 권한 부여와 관련된 로직을 구현하는 데 활용됩니다.

2.1 Guard의 실제 사용 예시

Guard의 예시는 다음과 같이 구현할 수 있습니다.

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';

@Injectable()
export class AuthGuard implements CanActivate {
    canActivate(context: ExecutionContext): boolean {
        const request = context.switchToHttp().getRequest();
        // 인증 로직 예시
        return request.headers.authorization === 'Bearer YOUR_TOKEN';
    }
}

3. Next.js의 Middleware 소개

Next.js는 React 기반의 서버 사이드 렌더링(SSR) 프레임워크입니다. Next.js에서도 미들웨어를 활용하여 HTTP 요청을 가로채고, 특정 기능을 처리할 수 있습니다.

3.1 Next.js의 Middleware 사용 방법

Next.js의 미들웨어는 기본적으로 파일 시스템 기반의 라우팅을 사용하며, middleware.js 파일을 생성하여 적용할 수 있습니다.

import { NextResponse } from 'next/server';

export function middleware(req) {
    if (!req.headers.get('Authorization')) {
        return NextResponse.redirect(new URL('/api/auth/unauthorized', req.url));
    }
    return NextResponse.next();
}

4. Next.js에서 API 요청 시 미들웨어 적용하기

Next.js에서 API 요청에 미들웨어를 적용하여 인증 및 권한 검사를 수행하는 방법을 구체적으로 알아보겠습니다.

4.1 Next.js API Routes 만들기

우선, API 경로를 생성하여 기본적인 API 엔드포인트를 설정해야 합니다. pages/api 디렉토리 내에 hello.js 파일을 생성합니다.

export default function handler(req, res) {
        res.status(200).json({ message: 'Hello, World!' });
    }

4.2 미들웨어 적용하기

이제 위에서 정의한 미들웨어를 적용하여 요청 시 인증 검사를 수행하도록 합니다.

import { NextResponse } from 'next/server';

export function middleware(req) {
    if (!req.headers.get('Authorization')) {
        return NextResponse.redirect(new URL('/api/auth/unauthorized', req.url));
    }
    return NextResponse.next();
}

4.3 전체 응용 프로그램에 미들웨어 적용하기

Next.js에서 모든 API 요청에 미들웨어를 적용하려면 middleware.js 파일을 프로젝트의 루트에 추가하여 전역 미들웨어로 설정해야 합니다.

5. Nest.js와 Next.js 통합하기

Nest.js와 Next.js를 함께 사용하여 전체 스택 애플리케이션을 구축할 수 있습니다. 이 때, Nest.js는 백엔드로서 API 서버 역할을 수행하고, Next.js는 프론트엔드로써 클라이언트 요청을 처리합니다.

5.1 Nest.js에서 API 및 인증 설정하기

@Controller('api')
export class ApiController {
    @Get('data')
    @UseGuards(AuthGuard)
    getData() {
        return { data: 'Some protected data' };
    }
}

5.2 Next.js에서 API 요청 처리하기

const fetchData = async () => {
        const res = await fetch('/api/data', {
            headers: {
                'Authorization': 'Bearer YOUR_TOKEN'
            }
        });
        if (!res.ok) throw new Error('Failed to fetch data');
        return res.json();
    }

6. 결론

Nest.js와 Next.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)을 쉽게 구현할 수 있도록 도와줍니다. 이 글에서는 Next.js의 동적 라우팅 및 페이지 생성 기능에 대해 자세히 설명하고, getStaticPaths와 getStaticProps의 사용법에 대해 알아보겠습니다.

1. 동적 라우팅이란?

동적 라우팅은 URL 경로의 일부가 동적으로 생성되거나 변화하는 라우팅 방식을 의미합니다. 예를 들어, 블로그 게시물의 URL이 /posts/[id]와 같이 특정 ID에 따라 변경될 경우, 이를 동적 라우팅이라고 합니다. Next.js에서는 파일 시스템 기반의 라우팅 시스템을 사용하여 동적 라우팅을 매우 간편하게 구현할 수 있습니다.

2. Next.js의 동적 라우팅 구현하기

Next.js에서는 동적 라우트를 만들기 위해 대괄호([])를 사용하여 파일 및 폴더 이름을 지정합니다. 예를 들어, pages/posts/[id].js라는 파일을 생성하면, /posts/1, /posts/2와 같은 URL을 처리할 수 있습니다.

 
// pages/posts/[id].js

import { useRouter } from 'next/router';

const Post = () => {
    const router = useRouter();
    const { id } = router.query;

    return (
        

            
Post ID: {id}
        
    );
};

export default Post;

위 코드는 동적 URL에서 가져온 ID를 화면에 표시하는 간단한 컴포넌트입니다. 그러나 실제 애플리케이션에서는 데이터 fetching이 필요합니다. 이를 위해 getStaticPaths와 getStaticProps를 사용하게 됩니다.

3. getStaticPaths와 getStaticProps 소개

getStaticPaths는 Next.js에게 어떤 경로를 미리 생성해야 하는지 알려주는 함수입니다. 이 함수는 동적 라우팅을 사용할 때 미리 렌더링할 경로의 목록을 제공하는 역할을 합니다. 반면에 getStaticProps는 특정 페이지를 미리 생성할 때 필요한 데이터를 가져오는 데 사용됩니다.

4. getStaticPaths 사용하기

우선 getStaticPaths를 사용하여 미리 생성할 경로를 정의해보겠습니다. 다음은 예시 코드입니다.

 
// pages/posts/[id].js

export async function getStaticPaths() {
    // 예시 데이터를 배열로 정의
    const posts = [
        { id: '1' },
        { id: '2' },
        { id: '3' }
    ];

    // paths 배열 형태로 경로 정의
    const paths = posts.map(post => ({
        params: { id: post.id }
    }));

    return { paths, fallback: false };
}

위 코드에서 getStaticPaths는 ID가 1, 2, 3인 게시물 경로를 정의했습니다. fallback: false 설정은 정의된 경로 외의 요청이 들어오면 404 페이지를 반환하게 합니다.

5. getStaticProps 사용하기

그런 다음, getStaticProps를 사용하여 각 게시물에 대한 데이터를 가져오겠습니다. 아래는 이에 대한 코드입니다.

 
// pages/posts/[id].js

export async function getStaticProps({ params }) {
    const { id } = params;

    // 여기에 실제 데이터 fetching 로직을 넣을 수 있습니다.
    const posts = [
        { id: '1', title: '첫 번째 게시물', content: '내용 1' },
        { id: '2', title: '두 번째 게시물', content: '내용 2' },
        { id: '3', title: '세 번째 게시물', content: '내용 3' }
    ];
    
    const post = posts.find(post => post.id === id);

    return {
        props: {
            post
        },
    };
}

위 코드에서는 게시물 ID에 해당하는 게시물을 찾아서 그 데이터를 props로 반환합니다. 이제 게시물 내용을 출력할 수 있도록 컴포넌트를 수정하겠습니다.

 
// pages/posts/[id].js

const Post = ({ post }) => {
    return (
        

            
{post.title}
            
{post.content}
        
    );
};

export default Post;

6. 전체 코드

위의 모든 내용을 통합하면 최종 코드는 다음과 같습니다.

 
// pages/posts/[id].js

import { useRouter } from 'next/router';

export async function getStaticPaths() {
    const posts = [
        { id: '1' },
        { id: '2' },
        { id: '3' }
    ];

    const paths = posts.map(post => ({
        params: { id: post.id }
    }));

    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const { id } = params;

    const posts = [
        { id: '1', title: '첫 번째 게시물', content: '내용 1' },
        { id: '2', title: '두 번째 게시물', content: '내용 2' },
        { id: '3', title: '세 번째 게시물', content: '내용 3' }
    ];
    
    const post = posts.find(post => post.id === id);

    return {
        props: {
            post
        },
    };
}

const Post = ({ post }) => {
    return (
        

            
{post.title}
            
{post.content}
        
    );
};

export default Post;

7. 결론

이번 글에서는 Next.js에서 동적 라우팅을 구현하는 방법과 getStaticPaths 및 getStaticProps의 사용법에 대해 알아보았습니다. 이러한 기능을 활용하면 미리 정의된 경로에 대해 정적 페이지를 생성하고, 각 페이지에 필요한 데이터를 효과적으로 가져올 수 있습니다. 이를 통해 성능과 SEO 최적화를 이룰 수 있습니다.

Next.js는 강력한 기능을 제공하여, 대규모 애플리케이션의 개발을 더욱 간편하게 만들어 줍니다. 본 문서를 통해 Next.js의 동적 라우팅과 페이지 생성을 위한 첫 발을 내딛는 데 도움이 되었기를 바랍니다. 앞으로도 더욱 다양한 Next.js의 기능을 활용해 보시길 추천드립니다.