Next.js 프로젝트 초기 세팅(CNA 부터 폴더 생성까지, With TS)

박민형·2023년 7월 1일

프로젝트 - 선행 학습, 배운점, 어려웠던점, 회고

목록 보기

6/16

팀 프로젝트를 진행하면서 초기세팅을 담당하게 되었다. 프로젝트의 세팅과 전체적인 부분을 다뤄야 한다는 생각에 두려움이 있었지만 다른 분들의 블로그 및 이전 프로젝트에서 초기세팅 관련 github commit 내역을 참고해 어렵지 않게 할 수 있었다. 해당 글은 next js로 처음 초기세팅을 해보시는 분에게 도움을 줌과 더불어 나 또한 다음에 초기세팅을 할 수 있는 상황이 발생할 수 있기 때문에 작성하게되었다!

📌 CNA(Create Next App)

요즘은 몇개의 명령어만 입력해주면 쉽게 프로젝트를 세팅할 수 있다!
폴더 생성 후 vscode의 터미널에 해당 명령어를 입력해주면 된다.

yarn create next-app --typescript

필자는 typescript로 프로젝트를 진행하기 때문에 뒤에 --typescript를 추가적으로 입력해주었다.

설치 시에 ESLint를 사용할거냐 src 폴더를 사용할거냐 등의 질문을 하는데 팀원과의 상의 후 결정된 사항에 맞게 선택하면 될 것 같다!

설치가 완료되면 아래 사진과 같이 Sucesss가 뜨며 왼쪽과 같이 폴더 및 파일들이 생성된다!

📌 사용하지 않는 파일 제거

이 작업은 팀마다 다를것이기 때문에 이런 작업도 있구나라고 참고만 해주면 될 것 같다. 필자가 해당 작업을 한 이유는 초기세팅 후에 팀원들에게 필요한 폴더 및 파일만 볼 수 있도록 함과 더불어 협업시 필요없는 자원으로 인한 혼란을 조금이라도 줄이기 위함이었다.

// _app.tsx
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

// index.tsx
export default function Home() {
  return <></>;
}

public 폴더의 하위 파일, hello.ts, globals.css(나중에 필요함) 등을 제거(팀 마다 다름)

_app.tsx, index.tsx 소스코드 최소한으로

📌 ESLint 및 Prettier

ESLint와 Prettier설정을 통해 코드의 잠재적 오류 예방 및 코드 스타일 유지를 통해 협업 시 효율을 높일 수 있다.

🔎 ESLint, Prettier
ESLint => 코드 스타일 및 코드 품질을 검사하고 정적 분석을 수행하여 잠재적인 오류나 문제를 식별
Prettier => 일관된 코드 스타일을 적용하여 가독성을 높여 협업에 도움

yarn을 통해 패키지 설치

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.json에 소스코드 작성

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "simple-import-sort"],
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@next/next/recommended",
    "next/core-web-vitals",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      { "endOfLine": "auto" },
      { "usePrettierrc": true }
    ],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/display-name": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-var-requires": 0,
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "simple-import-sort/imports": "warn",
    "simple-import-sort/exports": "warn"
  }
}

.prettierrc 파일 생성 후 소스코드 작성

{
  "jsxSingleQuote": true,
  "printWidth": 80,
  "quoteProps": "consistent",
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "semi": true
}

📌 simple-import-sort

해당 플러그인을 사용하면 hook, 컴포넌트, 외부 파일을 import 할 때 뒤죽박죽 섞여있지 않고 정렬 되기 때문에 가독성이 향상 된다.
패키지 설치

yarn add -D eslint-plugin-simple-import-sort

.eslintrc.json에 위의 사진의 빨간 네모 표시 된 부분의 코드를 추가해주면 된다.

아래 사진과 같이 자체적으로 제공하는 라이브러리, 외부 파일, 내부 파일 별로 구분이 되어 있어 사용하지 않았을 때보다 가독성이 향상 되었다! 만약 import가 섞여 있다면 에러가 표시되고 자동 저장을 하게 되면 알아서 정렬이 된다!

📌 필요한 라이브러리 설치

필자는 초기 세팅 시 필요한 라이브러리 관련해 팀원들과 회의 후 설치를 했다.
라이브러리 설치(tanstack query, axios, recoil)

yarn add @tanstack/react-query axios recoil

_app.tsx 코드 수정

import type { AppProps } from 'next/app';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RecoilRoot } from 'recoil';

export default function App({ Component, pageProps }: AppProps) {
  // 다른 사용자와의 데이터 공유 방지를 위해 useState 사용
  // react query 기본 옵션 설정(팀원들과 논의 후) 
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            retry: 1,
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <RecoilRoot>
        <Component {...pageProps} />
      </RecoilRoot>
    </QueryClientProvider>
  );
}

🔎 React Query Devtools

필자는 사용하고 있지 않지만 tanstack query를 사용하면서 데이터 fetch 여부, queryClient, 캐싱과 관련해 자주 check 해야 한다면 설치를 고려해보면 좋을 것 같다!

설치
yarn add @tanstack/react-query-devtools
_app.tsx에서 import
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
QueryClientProvider 하위에 설정
  return (
    <QueryClientProvider client={queryClient}>
      <RecoilRoot>
        <Component {...pageProps} />
      </RecoilRoot>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );