[Next.js + TypeScript] 프로젝트 생성 및 초기 설정 (Styled-Components 적용)

 
 
설 연휴 전 ......
프로님이 투두리스트를 주셨다.
 
프로젝트를 생성하고 도커 컴포즈로 컨테이너를 생성해보라고 하신 것..............
 

 
따흑 나에겐 시간이 별로 없다...
 
후딱 프로젝트 생성부터 해보자!
아직 이름이 정해지지 않아서 뭐 그냥 임시로 team-study로 가보려고 한다.
 

 

---

 

1. 프로젝트 생성

 
Next.js + TypeScript 프로젝트를 생성해보자.
 
 
터미널에 아래 명령어를 입력

npx create-next-app --typescript 프로젝트명

 
해당 명령어를 입력하고 프로젝트 폴더로 이동하면 아래와 같은 구조로 프로젝트가 생성된다.
 
입력하면
 

 
이렇게 물어본다.
 
원래 1번 질문은
Would you like to use TypeScript? 인데
나는 애초에 typescript 프로젝트로 생성해서 스킵됨
 

---

 

(1) Would you like to use ESLint?

 

 
이 질문은 ESLint를 프로젝트에 포함시킬지 묻는 것
 

ESLint는 JavaScript 및 TypeScript 코드에 대한 정적 분석 도구로,
코드에서 발견된 문제점을 식별하고 보고해주는 역할을 합니다.
이는 특정 코드 스타일 가이드를 따르거나, 잠재적인 코드 품질 문제 및 버그를 식별하는 데 도움이 됩니다.

 
사용하실 분은 yes를 눌러주시면 됩니다.
저는 yes를 눌렀는데, no를 해도 나중에 필요하다면 ESLint를 수동으로 설치하고 설정할 수 있음
 
 

(2) Would you like to use Tailwind CSS?

 

 
이 질문은 Tailwind CSS를 프로젝트에 포함시킬지 묻는 것
 

Tailwind CSS는 저수준의 유틸리티 기반 CSS 프레임워크입니다.
이를 사용하면 HTML 마크업 내에서 CSS 스타일을 직접 적용할 수 있습니다.
기본적으로 응답형 디자인, 다크 모드 지원, 폼 플러그인 등을 포함하여 매우 유연하고 사용자 친화적인 API를 제공합니다.

 
저번 블로그 만들 때 Tailwind CSS를 사용했었는데
생각보다 문법도 다르지 않고
쉽게쉽게 바꿔서 적용이 가능했습니다!

예쁘기도 하고여
개인적으로 굉장히 좋아합니다 하핫
 
해당 프로젝트에 사용하실 분은 yes를 눌러주시면 됩니다.
no를 눌러도 나중에 필요하다면 Tailwind CSS를 수동으로 설치하고 설정할 수 있음
 
 

(3) Would you like to use src/ directory?

 

 
이 질문은 프로젝트의 소스 코드를 'src/' 디렉토리 안에 구성하고 싶은지를 묻는 것
 
다른 보통의 프로젝트들 처럼 소스코드를 src 폴더에 넣어 관리하도록 하는 것이 좋다고 합니다.

해당 질문에 yes를 하시면 프로젝트의 구조를 'src/' 디렉토리 안에 넣어서 세팅해줍니다.
 
하지만 이 후에도 프로젝트의 구조는 개발자의 필요에 따라 언제든지 변경할 수 있음
 
 

(4) Would you like to use App Router? (recommended)

 

 
프로젝트에 App Router
즉, Next.js의 Custom _app.js 또는 _app.tsx 파일을 사용할 것인지 묻는 질문
 

_app.js 또는 _app.tsx 파일은 모든 페이지에 공통적인 레이아웃을 적용하거나, 페이지 전환 시 상태를 유지하는 등의 용도로 사용할 수 있습니다.
또한, CSS-in-JS 라이브러리를 사용하거나 글로벌 CSS를 적용할 때도 사용됩니다.

 
위의 기능이 필요하다면 yes를 선택하면 됩니다.
그렇지 않다면 no를 선택하면 되고, 나중에 필요하게 되면 언제든지 _app.js 또는 _app.tsx 파일을 추가할 수 있음
 
 

(5) Would you like to customize the default import alias?

 

 
import 경로에 대한 별칭(alias) 설정을 사용자 정의할 것인지 물어보는 것

별칭(alias)은 특정 디렉토리를 가리키는 새로운 이름을 설정하는 것을 의미합니다.
이를 사용하면 프로젝트의 특정 디렉토리를 간단하게 참조할 수 있습니다.
 
예를 들어, 프로젝트에서 자주 사용되는 디렉토리의 경로를 매번 전체 경로로 적지 않고, 별칭을 통해 짧고 간결하게 참조할 수 있습니다.

 
yes를 선택하면 프로젝트 설정에서 import 별칭을 사용자 정의할 수 있는 옵션이 활성화되며,
별칭을 원하는 대로 설정하여 사용할 수 있음
no를 선택하면 이 단계를 건너뛰고 별칭 설정 없이 프로젝트를 생성하게 됨
나중에 필요하다면 수동으로 별칭을 설정할 수 있음
 

(6) 정상 설치

 

 
설치가 완료되었습니다!
 

 
프로젝트의 구조가 위의 사진처럼 구성됩니다.
 

---

 

2. Styled-Components 적용

Styled-Components가 뭔지 궁금하시다면 하단 링크 참고!
 
https://react.vlpt.us/styling/03-styled-components.html

3. styled-components · GitBook

 

(1) Styled-Components 설치

아래의 명령어를 입력해 styled-components 및 관련 타입 정의를 설치함
 

npm install styled-components
npm install --save-dev @types/styled-components

 
저도 따라서 설치한 화면
 

 
 
package.json 파일에서 잘 설치되었는지 확인해보겠습니다.
 

 
설치 완료~!! 하핫
 
 

(2) 서버 사이드 렌더링을 지원하도록 설정하기

 

Next.js의 커스텀 Document를 이용하여 _document.tsx 파일을 생성합니다.

pages/ 디렉토리에 _document.tsx 파일을 만들고 아래의 코드를 추가합니다.

 

import Document, { DocumentContext } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

export default MyDocument

 

그대로 복사해서 넣으시면 됩니다!

 

만약 

'Cannot find module ...' ('next/document' 모듈을 찾을 수 없습니다.)

라는 에러가 발생한다면?

 

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

tsconfig.json

 

// moduleResolution": "bundler",
moduleResolution": "node",

 

moduleResolution을 node로 변경해주세요!

그럼 에러가 사라집니당

 

moduleResolution에 대한 정보는 하단 링크 참조

https://chiabi.github.io/2018/08/30/typescript/

 

TypeScript 사용할 때 'Cannot find module ...' 에러

 

 

이제 styled-components를 이용하여 스타일링을 적용할 수 있습니다!

 

지금까지 Next.js + Typescript 프로젝트 생성 및 초기 세팅하는 법에 대해 알아보았습니다.

 

 

감사합니당

꾸우벅

 

 
 
 
참고 링크
https://velog.io/@osohyun0224/Next.js-Typescript-Styled-Components-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85%ED%95%98%EB%8A%94-%EB%B2%95

velog