My First Next App (Export Static)

Start Project! 🔥
Go To DEMO

Table of Contents

• Description
• Features
• Required
• Getting Started
  • Installation
  • Start Project
• Test with Jest
• Storybook
• Build

Description

• Next 프레임워크를 사용한 프로젝트 초기 설정 목적

• 재사용 목적

• 해당 프로젝트를 Template으로 사용

• 특정 상황(폐쇄망 및 유지보수 용이 목적)을 위한 static build option 적용 (default : output 라인 삭제)

  /** @type {import('next').NextConfig} */
  
  const nextConfig = {
    output: 'export', // build 파일을 외부 static으로 뽑을 떄 추가하는 옵션, 미사용시 라인 주석 또는 제거 필요
    compiler: {
      styledComponents: true,
    },
  }
  
  export default nextConfig

Features

• Next.js App Router 이용
• Static Export 환경에서 i18n 적용 (next-export-i18n)
• styled-components Theme 적용 (Dark,Light)
• 폴더 구조 구성
• Storybook 초기 예제 코드 추가
• Jest 예제 코드 추가

Required

• Node.js >= 18.17
• npm (Node Package Manager)

Getting Started

Installation

• npm 기준으로 package-lock.json이 포함되어 있습니다.
• npm 으로 버전 관리

  npm install

Start Project

// development 환경에서 실행
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Test with Jest

# [] 생략 시 전체 테스트 : npm run test Button.test.tsx
npm run test [*.test.ts/tsx]
# or
yarn test [*.test.ts/tsx]
# or
pnpm test [*.test.ts/tsx]
# or
bun test [*.test.ts/tsx]

Storybook

npm run storybook
# or
yarn storybook
# or
pnpm storybook
# or
bun destorybookv

Build

Static 빌드 설정 되어 있습니다.

npm run build
# or
yarn build
# or
pnpm build
# or
bun build

⬆ Back to Top