Reactjs-Nextjs-template

by root-zero-o

Index

• Files
• Route
• Components
• Styling
• Data Fetching
• SEO
• Google Analytics, Google tag manager
• ESLint, Prettier
• Build
• etc

❕ Next.js v13 업데이트에 관한 약간의 설명이 함께 적혀있습니다.

Getting Started

Create new Project :

yarn
yarn dev

Framework & library

• Next.js (SSR framework) v13 doc
• next-seo (SEO)
• TailwindCSS, PostCSS, AutoPrefixer (Styling)

Features

• Prettier, ESLint
• Github Action
• Next.js v13 directory structure & example codes
• TailwindCSS basic settings
• Next-Seo
• Font(@next/font)
• absolute path import
• Google Analytics, Google tag manager
• Docker

---

Files

• layout.tsx

  • 모든 route가 공유하는 UI

  • app/layout.tsx는 기존 Next.js의 _app, _document의 역할을 한다고 합니다.

• page.tsx

  • route별 유니크한 UI

  • 기본 props로 params, searchParams를 지원합니다.

• loading.tsx

  • React Suspense의 fallback으로 사용되는 로딩 UI

  • 기본적으로 server component입니다.

  • 자동으로 페이지를 <Suspense/>로 감쌉니다.

  • 커스텀 스켈레톤 컴포넌트 구현에 적합합니다.

• error.tsx

  • 자동으로 페이지를 <ErrorBoudary/>로 감쌉니다.

  • 반드시 client component여야 합니다.

• head.tsx

  • 해당 route에서 <head/>를 조작할 수 있게 해줍니다.

  • 반드시 React fragment(</>)를 리턴해야합니다.(<head/>를 리턴해서는 안됩니다.)

• not-found.tsx

  • notFound() 함수가 404 에러를 리턴하면 렌더링되는 UI

다음과 같은 구조가 됩니다.

<Layout>
  <Template>
    <ErrorBoundary fallback={<Error />}>
      <Suspense fallback={<Loading />}>
        <Page />
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>

Route

• 폴더 구조를 기반으로 라우팅이 이루어집니다.

• app/page.tsx가 기본 페이지가 되며, 폴더로 구분합니다.(login 폴더 => /login)

• 중첩 라우팅 : 마찬가지로 폴더 구조를 통해 구현할 수 있습니다.(app/nested/routing 참고)

• 그룹화 라우팅

  • (폴더명) 으로 폴더를 만들어 라우팅을 그룹화할 수 있습니다 ((auth)/login).

  • 이 때 (폴더명)은 URL에서 생략됩니다.

  • 그룹화된 라우팅별로 레이아웃을 따로 생성할 수 있습니다.(폴더 안에 layout.tsx 생성, (auth)/layout.tsx 참고)
    

• 다이나믹 라우팅

  • [폴더명]으로 폴더를 만들어 다이나믹 라우팅을 구현할 수 있습니다.(/post/[slug]/page.tsx 참고)

  • generateStaticParams()로 데이터에 맞는 param을 생성할 수 있습니다.(여기를 참고하세요)

    export async function generateStaticParams() {
      const posts = await getPosts();
    
      return posts.map((post) => ({
        slug: post.slug,
      }));
    }

Components

• app 폴더 내 component는 기본적으로 server component입니다.(page도 마찬가지)

• component 내에서 react hook을 사용하기 위해서는 최상단에 use client를 명시하여 client component로 만들어준 뒤 사용해야 합니다.

⚠️ server component는 client component에서 import할 수 없습니다.

Styling

• TailwindCSS를 사용하기 위한 세팅이 되어 있습니다.(tailwind.config.js, app/globals.css를 확인하세요.)

• Next.js에서는 data fetching이 일어나지 않는 client component에서 스타일링을 모두 처리할 것을 권장하고 있습니다. (client component에서의 data fetching 권장하지 않음)

• TailwindCSS의 class를 다이나믹하게 이용하기 위해 tailwind-merge와 clsx 라이브러리르 사용하고 있습니다.

  • 자세한 코드는 src/lib/utils.ts에서 확인하세요.

⚠️ CSS-in-JS 라이브러리는 현재 server component에서 사용할 수 없습니다.(이후 업데이트될 예정이라고 함)

• 폰트

  • @next/font를 통해 구글 폰트를 더 쉽게 사용할 수 있습니다.

  • 자세한 코드는 app/layout.tsx를 확인하세요.(현재 Roboto 폰트가 적용되어 있습니다.)

Data Fetching

• Next.js에서는 기본적으로 server component에서 데이터를 불러오는 것을 권장합니다.

• client component에서의 data fetching이 필요한 경우, React의 use()를 사용하거나 SWR, React Query를 사용할 수 있습니다. (Next.js에서는 아직 use()를 사용하지 않는 것을 권장합니다.)

• Data fetching에는 static data fetching, dynamic data fetching의 두 가지가 있습니다.

  • Static Data Fetching : 자주 바뀌지 않는 데이터, 자동적으로 데이터를 캐싱합니다.

  • Dynamic Data Fetching : 자주 바뀌는 데이터, 데이터가 캐싱되지 않습니다.

• 자세한 fetching 코드는 app/post/[slug]/page.tsx 를 참고하세요.

SEO

• next-seo 라이브러리를 사용하고 있습니다.

• Next.js v13 next-seo reference는 여기에서 확인하세요.

• app/head.tsx 에서 next-seo.config.js를 통해 전역 SEO를 사용하고 있습니다.

• 페이지별 SEO 오버라이딩은 app/login/head.tsx 를 확인하세요.

• Next.js v13부터 새롭게 사용되는 app 폴더를 사용하려면 useAppDir props를 반드시 사용해야 합니다.

⚠️ layout.tsx 의 <head/> 안에 작성한 코드는 모든 페이지에 적용되며, 오버라이딩할 수 없습니다.

Google Analytics, Google tag manager

• vercel에서 제공하는 예시를 참고했습니다. 예시는 여기에서 확인하세요.

ESLint, Prettier

• 자세한 설정은 .prettierrc.json, .eslintrc.js에서 확인하세요.

Build

• Docker를 이용해 이미지를 만들고, Github Actions를 통해 자동으로 이미지를 AWS ECR에 업로드합니다.

• Next.js에서 권장하는 Dockerfile 형식을 기반으로 하고 있습니다. 구체적인 예시는 여기를 확인하세요.

• AWS ECR register, repo 주소는 테스트용이니, 사용하실 주소로 변경 후 사용해주세요.

• Github Secret에 access key, secret access key가 저장되어 있지 않으니, 사용하시기 전 등록해주세요.

⚠️ 빌드 시 발생하는 아래 warning은 next.js v13 app directory 사용에 의해 발생하는 것입니다.

• You have enabled experimental feature (appDir) in next.config.js.
• Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

Storybook(⛔️현재 미사용중입니다.)

• UI 문서화를 위해 storybook을 사용합니다.

• 스토리북의 전반적인 이해와 활용 방법은 여기를 참고했습니다.(⚠️ 현재 버전과 맞지 않는 부분이 있으니 주의하세요.)

• .storybook/main.cjs와 src/components/Hello 에서 예시 코드를 확인하세요.

⚠️ .storybook/main.cjs를 ES module 형식인 main.js로 바꾸게 되면 에러가 발생합니다.

• 이 템플릿에서는 commonJS 형식인 main.cjs로 파일명을 변경하여 에러를 해결했습니다.
• 해당 이슈는 여기에서 확인할 수 있습니다.

• 스토리북 실행

  yarn storybook
  

• 스토리북 local

  http://localhost:6006/
  

• 애드온

  • Docs : 컴포넌트의 props와 주석으로 문서를 자동 생성해주는 애드온

    • Docs로 문서를 생성하는 방법은 components/Hello/Hello.tsx의 주석을 참고하세요.

⚠️ 현재 빌드시 아래와 같은 peer dependency warning이 발생하고 있으며, 해당 이슈는 해결 후 배포될 예정이라고 합니다.

• @storybook/react@6.5.15" has unmet peer dependency "require-from-string@^2.0.2"
• 자세한 내용은 여기를 확인하세요.

⛔️ Storybook이 React18과 아직 완전히 호환되지 않는 부분(peer dependency 등)이 있어, 빌드 시 관련 warning이 발생합니다. 추후 storybook이 업데이트되면 다시 사용하겠습니다.

etc

• @를 사용해 absolute import를 할 수 있습니다.

  • 해당 코드는 tsconfig.json에서 확인하실 수 있습니다.

    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    },

• IE 접속시 크롬 다운로드 팝업이 노출됩니다.

  • 해당 코드는 app/layout.tsx에서 확인하실 수 있습니다.(Next.js Script 사용)