사이트 소개

소개

이 사이트는 Riku-Mono의 포트폴리오 사이트입니다.

저에 대한 정보와 블로그, 작품을 공개하고 있습니다.

현재 Next.js v15 (App Router - TypeScript)로 구축되어 있으며, contentlayer2를 사용하여 MDX 파일로 페이지 구성 및 관리를 하고 있습니다.

사이트 구성

• Next.js
• TypeScript
• Tailwind CSS
• contentlayer2
• i18n
  • i18next
  • next-i18n-router
• pnpm

사용 방법

1. pnpm install
2. pnpm dev
3. localhost:3000에서 확인할 수 있습니다.

작성 방법

블로그 포스트

1. src/contents/posts/[lang]/에 각 언어별로 포스트를 작성합니다.
2. src/contents/posts/[lang]/[slug].mdx와 같이 파일명을 설정합니다.
3. src/contents/posts/[lang]/[slug].mdx의 Front Matter에 포스트 정보를 설정합니다.

작품

1. src/contents/works/[lang]/에 각 언어별로 작품을 작성합니다.
2. src/contents/works/[lang]/[slug].mdx와 같이 파일명을 설정합니다.
3. src/contents/works/[lang]/[slug].mdx의 Front Matter에 작품 정보를 설정합니다.

Front Matter에 필요한 정보와 설정 방법은 이 사이트에서 사용 가능한 속성을 참조하세요.

언어 추가 방법

1. src/i18n/i18nLocales.js에 언어 코드를 추가합니다.

const defaultLocale = 'ja';
const locales = ['ja', 'en', 'ko' /* 추가할 언어 */];
 
module.exports = { defaultLocale, locales };

2. src/contents/posts/[lang]/, src/contents/pages/[lang], src/contents/categories/[lang], src/i18n/locales/[lang]에 언어 코드 디렉토리를 생성합니다.

3. src/contents/posts/[lang]/, src/contents/pages/[lang]에서는 해당 언어 번역 파일이 없는 경우 defaultLocale 파일을 참조하므로 즉시 번역할 필요는 없습니다.

4. src/contents/categories/[lang]에 카테고리 번역을 추가합니다. defaultLocale 디렉토리의 카테고리를 참조하여 모든 파일을 반드시 생성해주세요.

5. src/i18n/locales/[lang]에 언어 파일 번역을 추가합니다. defaultLocale 디렉토리의 파일을 참조하여 모든 파일을 반드시 생성해주세요.

6. scr/contents/siteLocaleMetadata.js에 언어 메타데이터를 추가합니다.

type Metadata = {
  [locale: string]: string;
};
 
export const title: Metadata = {
  ja: 'Riku-Mono ポートフォリオ',
  en: 'Riku-Mono Portfolio',
  ko: 'Riku-Mono 포트폴리오',
  /* 추가할 언어 */
};
 
export const description: Metadata = {
  ja: 'Riku-Monoのポートフォリオサイトです。ブログと成果物を公開しています。',
  en: 'Riku-Mono Portfolio Site. Blog and Works are published.',
  ko: '리쿠-모노 포트폴리오 사이트. 블로그와 작품을 공개합니다.',
  /* 추가할 언어 */
};