Nextjs 프로젝트 생성하기 (tailwind/typography, Shadcn)

🚀

들어가기 전에🔗

블로그 개발을 위한 기본 설정을 해보도록 하자.

이 포스팅에서 설정할 내용은 다음과 같다.

Next.js 프로젝트 생성
Tailwind CSS(Shadcn/ui) 설정

👨‍💻

Node.js 18버전 이상, npm이 설치되어 있어야 한다.

🚀

Next.js 프로젝트 생성 및 실행🔗

✅

프로젝트 생성🔗

Next.js 프로젝트를 생성하기 위해 다음 명령어를 실행한다.

npx create-next-app@latest

모두 기본 설정으로 진행하였다.

프로젝트 이름
을 입력한다.
TypeScript
를 사용할 것인지 선택한다.
- JavaScript를 사용할 것이라면
  No
  를 선택한다.
ESLint
를 사용할 것인지 선택한다.
Tailwind CSS
를 사용할 것인지 선택한다.
'src/'
디렉토리를 생성할 것인지 선택한다.
App 라우팅
을 사용할 것인지 선택한다.(Next.js 13 버전 이상 지원)
- Page 라우팅을 사용할 것이라면
  No
  를 선택한다.
절대 경로 설정
을 수정할 것인지 선택한다.
- 기본 설정은
  'src/'
  디렉토리이다.

✅

프로젝트 실행🔗

프로젝트 생성이 완료되면 다음 명령어를 실행하여 추가 패키지를 최신 버전으로 설치(업데이트)한다.

cd {프로젝트 이름}
npm install next@latest react@latest react-dom@latest

프로젝트를 실행하기 위해 다음 명령어를 실행한다.

npm run dev

프로젝트가 정상적으로 실행 후 브라우저에서 http://localhost:3000↗ 으로 접속하면 다음과 같은 화면이 나타난다.

해당 화면은 `src/app/page.tsx` 파일을 렌더링 한 페이지이다.

🚀

Tailwind CSS 설정🔗

✅

Shadcn/ui 설치 (선택)🔗

Shadcn/ui는 Tailwind CSS를 사용한 UI 라이브러리이다.

Shadcn/ui↗

다음 명령어를 실행하여 Shadcn/ui를 설치한다.

tailwind-merge는 Shadcn/ui에서 사용하는 플러그인이다.

npx shadcn-ui@latest init
npm i tailwind-merge

기본 설정으로 진행하였다.

✅

tailwindcss/typography 설치 (선택)🔗

기본적으로 Next.js 프로젝트 생성 시 Tailwind CSS 설정이 완료되어 있다.

다만, Tailwind CSS는 HTML 태그의 스타일을 무시하는 특성이 있어, 후에 Markdown 파일을 렌더링 할 때 스타일이 적용되지 않는다.

이를 해결하기 위한 것이 prose 옵션이다.

prose 옵션은 tailwindcss/typography 플러그인을 사용하여 Markdown 파일을 렌더링 할 때 스타일을 적용한다.

다음 명령어를 실행하여 tailwindcss/typography 플러그인을 설치한다.

npm i @tailwindcss/typography

tailwind.config.ts 파일을 열어 다음과 같이 플러그인을 추가한다.

tailwind.config.ts

module.exports = {
	// ...
	plugins: [
		require('@tailwindcss/typography'),
		// ...
	],
	// ...
}

✅

참고🔗

Next.js 공식 문서↗

Tailwind CSS 공식 문서↗

Shadcn/ui 공식 문서↗

Nextjs 프로젝트 생성하기 (tailwind/typography, Shadcn) Initialize Nextjs Project (tailwind/typography, Shadcn)