728x90
기본 프로젝트 구조 설계
2.1 Next.js의 기본 프로젝트 구조 이해
Next.js 프로젝트 구조는 파일 기반 라우팅 시스템을 사용하여 폴더와 파일을 정리하는 방식입니다. 여기서는 주요 폴더들과 그 역할을 설명합니다.
pages 폴더
- 역할: 이 폴더는 Next.js의 핵심이며, 파일 기반 라우팅을 제공합니다. 폴더 내 파일 이름이 URL 경로로 매핑됩니다.
- 예시: pages/index.js는 / 경로로, pages/about.js는 /about 경로로 매핑됩니다.
components 폴더
- 역할: 프로젝트 내에서 반복적으로 사용되는 UI 컴포넌트를 보관하는 폴더입니다.
- 예시: Header, Footer와 같은 컴포넌트를 만들고 재사용할 수 있습니다.
public 폴더
- 역할: 정적 자산(이미지, 폰트, 문서 등)을 보관하는 곳입니다. 이 폴더 내의 파일들은 /public 경로 없이 바로 URL에서 접근할 수 있습니다.
- 예시: public/logo.png는 /logo.png로 접근할 수 있습니다.
styles 폴더
- 역할: CSS 파일을 보관하는 폴더입니다. 전역 스타일 파일이나 특정 컴포넌트의 스타일을 모아 관리할 수 있습니다.
pages/_app.js의 역할
- 역할: Next.js의 최상위 컴포넌트로서, 모든 페이지에 공통으로 적용되는 레이아웃과 설정을 관리합니다.
- 이곳에서 전역 스타일을 적용하거나, 페이지 전환 시 상태를 유지할 수 있습니다.
- 예시: 각 페이지에 공통으로 적용될 헤더나 푸터 등을 이곳에서 설정할 수 있습니다.
pages/_document.js의 역할
- 역할: HTML 문서의 문서 구조를 커스터마이징할 수 있는 파일입니다. 서버 사이드에서 한 번만 렌더링되며, <html>, <head>, <body>와 같은 태그를 수정할 수 있습니다.
- 예시: 웹사이트 폰트나 메타 태그를 전역으로 설정할 때 유용합니다.
2.2 i18next 설정 파일 구성
i18next의 역할과 기능 설명
- i18next는 다국어 지원을 위해 사용되는 라이브러리로, 언어 번역 및 언어 전환 기능을 제공합니다.
- 서버 및 클라이언트에서 번역을 처리하며, 다국어 콘텐츠를 쉽게 관리할 수 있습니다.
- 번역 파일을 JSON 형식으로 관리하여 다양한 언어를 간편하게 추가할 수 있습니다.
다국어 설정 파일 i18n.js 작성
- i18n.js 파일 생성
- lib/i18n.js 파일을 생성하고, i18next와 next-i18next를 설정합니다.
- 이 파일에서 지원할 언어와 기본 언어, 번역 파일을 설정합니다.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(HttpBackend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
supportedLngs: ['en', 'ko'],
backend: {
loadPath: '/locales/{{lng}}/translation.json',
},
interpolation: {
escapeValue: false,
},
});
export default i18n;next-i18next 라이브러리 설정 (SSR과 통합)
- next-i18next 설정
- SSR(Server-Side Rendering)과 함께 i18next를 사용하기 위해 next-i18next 라이브러리를 설정합니다.
- i18next 설정이 적용된 next-i18next.config.js 파일을 생성합니다.
module.exports = { i18n: { defaultLocale: 'en', locales: ['en', 'ko'], }, react: { useSuspense: false }, };
- _app.js에 i18next 적용
- i18next 설정을 적용하여 모든 페이지에서 다국어 지원이 가능하게 만듭니다.
- pages/_app.js에 i18n을 import하여, 다국어 번역 기능이 전역에서 적용되도록 합니다.
import { appWithTranslation } from 'next-i18next'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default appWithTranslation(MyApp);
- 서버 사이드 렌더링에서 i18next와 연동
- SSR에서 i18next를 사용할 때, 서버에서 언어를 감지하고 번역된 HTML을 렌더링하는 과정을 처리합니다.
- Next.js에서 SSR을 위한 getServerSideProps와 i18next를 연동하여 번역 데이터를 미리 로드합니다.
이 단계에서는 Next.js의 기본 프로젝트 구조를 이해하고, i18next 설정을 통해 다국어 지원 기능을 추가하여 SSR과 통합하는 과정을 배웁니다.
728x90
'React > next.js' 카테고리의 다른 글
| Next.js와 i18next를 사용한 다국어 사이트 구축(5): 성능 최적화 전략 (1) | 2024.10.22 |
|---|---|
| Next.js와 i18next를 사용한 다국어 사이트 구축(4): 페이지별 다국어 처리 및 레이아웃 구성 (0) | 2024.10.22 |
| Next.js와 i18next를 사용한 다국어 사이트 구축(3): 다국어 지원 기능 추가 (0) | 2024.10.22 |
| Next.js와 i18next를 사용한 다국어 사이트 구축(1): 소개 및 준비 사항 (1) | 2024.10.22 |
| Next.js(SSR)와 i18next를 사용한 다국어 사이트 구축 및 성능 최적화 (0) | 2024.10.22 |