소개

여러분, 안녕하세요. 이번 포스트에서는 NextJS, TailwindCSS, TypeScript를 사용하여 프로젝트를 설정하는 방법에 대해 설명하려고 합니다. 이 블로그는 앞으로 제가 참고할 가이드 역할도 할 것입니다. 이 가이드는 모든 명령에 대한 자세한 가이드가 아니라 참조할 수 있는 일종의 체크리스트입니다. 노드 응용 프로그램 실행에 대한 기본 지식이 있다고 가정합니다.
시작하자.

NextJS 설치

첫 번째 단계는 nextJS를 설치하는 것입니다. npm checked 디렉토리를 아직 만들지 않은 경우. 새 디렉토리를 만들고 cd를 입력하고 다음을 입력하십시오.

npm init -y

그러면 모든 기본값이 포함된 package.json 파일이 자동으로 생성됩니다.

다음 단계는 웹 응용 프로그램을 실행하는 데 필요한 다음 및 기타 종속성을 설치하는 것입니다. 방법은 다음과 같습니다.

npm install next react react-dom

Next와 React가 성공적으로 설치되면 package.json의 npm 스크립트를 수정하여 다음 애플리케이션을 개발하고 빌드하는 동안 원하는 적절한 스크립트를 실행합니다. package.json의 scripts 속성을 다음과 같이 수정합니다.

"scripts": {
  "dev": "next dev", // starts next in development mode
  "build": "next build", //builds the application for production usage
  "start": "next start" // starts a nexjs production server
}

이렇게 하면 설정이 완료됩니다. 모든 것이 예상대로 작동하는지 확인하기 위해 몇 가지 간단한 파일을 추가해 보겠습니다. src/pages/폴더를 생성합니다(NextJS는 이 디렉터리에서 자동으로 파일을 제공합니다). 이 디렉터리에 index.js 파일을 추가합니다. 이 파일에 기본 Hello World 반응 페이지를 추가합니다. 이 작업을 마치면 다음을 입력하십시오.

npm run dev

개발 환경을 시작합니다. 이제 적절한 포트에 있는 애플리케이션의 루트(/)에서 hello-world 반응 페이지를 볼 수 있어야 합니다.

TailwindCSS 추가

NextJS로 설정을 마쳤으면 TailwindCSS를 설치하여 애플리케이션 설계에 도움을 줍니다.
Tailwind 및 필수 종속성 설치부터 시작하겠습니다.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

이제 Tailwind를 실행하려면 특정 구성 파일이 필요합니다( tailwind.config.js 및 postcss.config.js 참조). 이것을 설치하려면 다음을 실행하십시오.

npx tailwindcss init -p

이렇게 하면 프로젝트의 루트에 최소한의 tailwind.config.js 파일이 생성됩니다.

다음 단계는 프로덕션 빌드에서 사용하지 않는 스타일을 제거하도록 tailwind를 구성하는 것입니다. tailwind.config.js에 생성된 purge 매개변수를 다음과 같이 수정하여 이를 수행합니다.

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

이것으로 테일윈드 설정이 완료됩니다. 다음 단계는 css에 tailwind를 포함하는 것입니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

글로벌 css 파일에서. 아직 전역 css 파일을 만들지 않은 경우 새 파일을 만듭니다.

src/styles/globals.css

위의 tailwind 지시어를 추가합니다.

마지막으로 css 파일을 jsx 구성 요소로 가져옵니다. nextJS로 이 작업을 수행하는 방법은 다음을 포함하는 새src/pages/_app.js 파일을 만드는 것입니다.

import '../styles/globals.css' // or the location of your css file

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

이것은 모든 페이지에 css를 추가하고 모든 페이지에서 tailwind를 사용할 수 있습니다.
이제 놀라운 TailwindCSS를 사용하여 구성 요소 스타일링을 시작할 수 있습니다.

TypeScript 지원 추가

먼저 디렉터리의 루트에 빈tsconfig.js 파일을 생성합니다. 이 프로젝트에서 typescript를 사용하는 다음 실행 파일을 지정합니다.

다시, 다음 단계는 TypeScript를 설치하는 것입니다.

npm install --save-dev typescript @types/react @types/node

마지막으로 다음과 같이 개발 서버를 시작합니다.

npm run dev

이를 통해 nextJS는 2가지 작업을 수행합니다. tsconfig.js 파일을 자동으로 채우고(나중에 구성을 변경할 수 있음) next-env.d.ts 파일을 생성하여 TypeScript 컴파일러에서 Next.js 유형을 선택하도록 합니다. 이 파일을 건드리면 안됩니다.

코다

그게 다야. 이것으로 짧은 튜토리얼을 마칩니다. 자습서를 따르는 데 문제가 있거나 이러한 프레임워크를 설정하는 데 문제가 있는 경우 저에게 연락하세요.