1. next.js 설치
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
해당 URL에서 LTS모드 다운로드 합니다.(안정적인 LTS 모드)
이후, node.js를 설치합니다.
2. ShadCN 설치
2-1. ShadCN( 현대 웹 애플리케이션을 위한 UI 컴포넌트 라이브러리 )이란?
React를 기반으로 하는 이 라이브러리는 아름다움과 접근성을 겸비한 UI 컴포넌트를 제공하여, 웹 애플리케이션의 인터페이스를 한 단계 업그레이드할 수 있도록 돕습니다.
- Tailwind CSS와 Radix UI의 결합
Shadcn은 세련된 디자인과 우수한 사용성을 위해 Tailwind CSS와 Radix UI를 기반으로 합니다. Tailwind CSS의 유틸리티-퍼스트 접근 방식과 Radix UI의 접근 가능한 컴포넌트 라이브러리가 결합되어, 개발자들이 빠르고 효율적으로 반응형 웹 애플리케이션을 구축할 수 있게 합니다. - 다양한 웹 개발 프레임워크 지원
Shadcn은 Next.js, Gatsby, Remix, Astro, Laravel, Vite 등과 같은 다양한 웹 개발 프레임워크를 지원합니다. 이는 개발자가 사용하는 기술 스택에 관계없이 Shadcn을 통해 프로젝트에 쉽게 통합할 수 있음을 의미합니다. 이로 인해 개발자는 새로운 프로젝트를 시작하거나 기존 프로젝트를 개선할 때 더욱 유연하게 작업할 수 있습니다.
2-2. ShadCN 설치
- cmd창 아래 명령어 입력
npm install -g pnpm
- 이후 아래 명령어 입력
- pnpm: Node.js 패키지 관리자 중 하나,
- dlx: download and excute의 약자로, pnpm의 기능 중 하나. 이 명령어는 특정 패키지를 전역으로 설치하지 않고도 한 번의 실행으로 해당 패키지를 다운로드하고 실행할 수 있게 함
- create-next-app: Nexj.js 어플리케이션을 쉽게 시작할 수 있도록 도와주는 도구. 이 명령어는 Next.js 프로젝트의 기본 구조를 생성하고, 필요한 의존성을 설치하여 개발자가 바로 개발을 시작할 수 있도록 준비
- my-ai-app: 생성될 Next.js 어플리케이션의 이름.(각자 알아서 지정하면됨.)
pnpm dlx create-next-app my-ai-app
- 사용 미사용 체크
- src/ directory(오류 위험)으로 인해 해당 프롬프트 시퀀스만 제외하고 yes
- 사용할 패키지 설명
-
- TypeScript 사용 여부: TypeScript는 JavaScript에 타입을 추가하여 더 안전하고 관리하기 쉬운 코드를 작성할 수 있게 해주는 언어 확장입니다. 사용자는 프로젝트에서 TypeScript를 사용할지 여부를 선택할 수 있습니다.
- ESLint 사용 여부: ESLint는 코드 품질과 코딩 스타일 문제를 식별하기 위한 정적 코드 분석 도구입니다. 프로젝트에 ESLint를 추가하면 일관된 코드 스타일을 유지하고 버그를 미리 발견하는 데 도움이 됩니다.
- Tailwind CSS 사용 여부: Tailwind CSS는 유틸리티-퍼스트 CSS 프레임워크로, 빠르고 반응형 디자인을 쉽게 구현할 수 있게 도와줍니다. 사용자는 프로젝트에 Tailwind CSS를 사용할지 선택할 수 있습니다.
- src/ 디렉토리 사용 여부: 일부 사용자는 프로젝트의 소스 파일을 src/ 디렉토리 내에 구성하는 것을 선호할 수 있습니다. 이는 코드 구조를 더 깔끔하게 관리할 수 있게 해주지만, 특정 설정이나 구성 방식에서는 오류를 일으킬 위험이 있을 수 있습니다.
- App Router 사용 여부: Next.js 13부터 도입된 App Router는 페이지와 라우트를 더 유연하게 관리할 수 있게 해주는 기능입니다. 이를 사용하면 선언적인 라우팅과 다양한 최적화 이점을 누릴 수 있습니다.
- 기본 import alias 사용자 정의 여부: import alias를 사용하면 프로젝트 내에서 파일을 임포트할 때 상대 경로 대신 미리 정의된 별칭을 사용할 수 있습니다. 이는 코드의 가독성을 향상시키고 유지 보수를 용이하게 합니다.
- 설정할 import alias: 사용자는 특정 별칭을 설정하여 프로젝트 내의 임포트 문을 간소화할 수 있습니다. 예를 들어, @/* 별칭을 사용하면 프로젝트의 루트 디렉토리에서 파일을 직접 참조할 수 있습니다.
-
C:\Users>npm install -g pnpm
added 1 package in 10s
1 package is looking for funding
run `npm fund` for details
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice
C:\Users\aiconnect>
C:\Users\aiconnect>
C:\Users\aiconnect>pnpm dlx create-next-app my-ai-app
Packages: +1
+
Progress: resolved 1, reused 0, downloaded 1, added 1, done
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
√ What import alias would you like configured? ... @/*
Creating a new Next.js app in C:\Users\aiconnect\my-ai-app.
- shadcn 설치
- 설치된 파일로 이동 후(cd) shadcn 설
C:\Users\aiconnect>cd my-ai-app
C:\Users\aiconnect\my-ai-app>pnpm dlx shadcn-ui@latest init
이후 설치가 완료되면 local주소가 나올 것이며, 해당 로컬로 이동할 경우
위와 같은 페이지가 나올 것입니다. 이제 개발을 시작하시면 됩니다.