TypeScript로 Next.js를 설정하는 방법

새 React 프로젝트를 시작하는 경우 Next.js 및 TypeScript 을 고려할 수 있습니다. 이 기사에서는 이것이 왜 훌륭한 선택인지 설명하고 이러한 기술을 사용하여 새 프로젝트를 설정하는 프로세스를 안내합니다.

왜 Next.js

React로 새 프로젝트를 시작할 때 고려해야 할 중요한 세부 사항이 많이 있습니다. 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 컴파일러를 사용하여 변환되어야 합니다.

Create React App은 이를 처리하는 좋은 도구가 될 수 있고 엄청난 시작을 제공할 수 있지만, 코드 분할, 성능을 위한 사전 렌더링, SEO 또는 서버 측 렌더링은 어떻습니까?

완전한 React 애플리케이션을 빌드하려면 CRA가 제공하는 것 이상이 필요합니다. 이러한 모든 문제에 대한 솔루션을 제공하는 React 프레임워크인 Next.js를 사용하면 시간을 절약할 수 있습니다.

왜 TypeScript인가?

TypeScript은 정적 유형 정의를 추가하여 JavaScript를 기반으로 하는 오픈 소스 언어입니다. 유형은 개체의 모양을 설명하는 방법을 제공하여 더 나은 문서를 제공하고 TypeScript가 코드가 올바르게 작동하는지 확인할 수 있도록 합니다.

TypeScript가 프론트 엔드 개발을 인수하는 것 같습니다. the State of JS survey을 채운 개발자의 거의 90%가 다음 프로젝트에서 TypeScript를 사용하거나 사용하는 방법을 배우고 싶다고 인정합니다. 그 외에도 Stack Overflow의 2019developer survey에 따르면 가장 사랑받는 언어 중 하나입니다.

매우 인기가 있으며 개발 중에 많은 이점이 있습니다. 이러한 이점을 "Stack Choices: JavaScript vs TypeScript"에서 더 지정했습니다.

시작하자

처음부터 시작하는 경우 터미널을 열고 프로젝트 폴더 내에서 yarn create next-app를 실행합니다(이 예제에서는 Yarn이 사용되지만 물론 npm도 사용할 수 있음).

다음 메시지가 표시됩니다.

What is your project named?

이름을 입력하고 Enter 키를 누릅니다. 다음 메시지는 다음과 같습니다.

Pick a template

Default starter app 를 선택하고 프로젝트가 준비될 때까지 기다립니다. 그런 다음 터미널에 cd <your-project-name>를 입력하여 개발 서버를 시작하기 위해 yarn dev를 실행할 수 있는 디렉터리 안에 있는지 확인합니다.

모든 것이 정상이면 TypeScript를 설정할 수 있습니다. 프로젝트 루트에 빈tsconfig.json 파일을 생성하여 시작합니다.

touch tsconfig.json

개발 서버를 다시 시작해 보세요(yarn dev). 다음과 같은 경고 메시지가 표시됩니다.

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

다음 지침에 따라 TypeScript를 설치합니다.

yarn add --dev typescript @types/react @types/node

이제 개발 서버를 다시 시작해 보십시오. 서버를 시작한 후 Next.js는 다음을 수행합니다.

tsconfig.json 파일을 채우십시오. 이 파일을 사용자 정의할 수 있습니다.

TypeScript 컴파일러에서 Next.js 유형을 선택하도록 하는 next-env.d.ts 파일을 만듭니다. 이 파일을 만지면 안됩니다.

이제 index.js 를 index.tsx 로 변경하여 사용해 보겠습니다. 아무 것도 중단되지 않으면 이제 Next.js 애플리케이션에 TypeScript를 사용할 수 있다는 의미입니다.

그리고 그게 다야! 프로젝트에 행운을 빕니다. 궁금한 점이 있으면 언제든지 질문하세요.

읽어 주셔서 감사합니다.


다음 프로젝트에서 시간을 절약하고 인증, 결제, 팀 등의 구현을 건너뛰고 싶다면 go here 구독하고 React 개발자를 위한 SaaS 스타터 키트 구축 진행 상황을 따르십시오. 또는 www.jakeprins.com에서 할 수도 있습니다.