오늘은 제가 사용하는 Next.js의 설치 방법에 대해 포스트하려고합니다.

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다. 이를 통해 검색 엔진 최적화(SEO)가 용이하며, 빠른 초기 로딩 속도를 제공합니다.
Next.js는 기본적으로 파일 기반의 라우팅, 자동 코드 분할, API 라우팅 등을 제공하여 개발자가 더욱 쉽게 웹 애플리케이션을 구축할 수 있도록 합니다.

프레임워크란?

프레임워크란 소프트웨어 개발 시 일관된 구조와 표준을 제공하는 도구입니다. 마치 집을 짓기 위해 필요한 설계도와 도구들처럼, 개발자가 효율적으로 작업을 할 수 있도록 돕습니다. 프레임워크를 사용하면 코드의 재사용성이 높아지고, 개발 속도가 빨라지며, 유지보수가 용이해집니다.

Next.js 왜 사용하나요 ?

1. 서버 사이드 렌더링(SSR):

초기 로딩 속도가 빠르고 SEO에 유리합니다.

2. 정적 사이트 생성(SSG)

빌드 시 HTML 파일을 생성하여 빠른 페이지 로딩이 가능합니다.

3. 자동 코드 분할

각 페이지는 필요한 자바스크립트 파일만 로드하여 성능이 최적화됩니다.

4. 파일 기반 라우팅

폴더와 파일 구조만으로도 라우팅을 쉽게 관리할 수 있습니다.

Next.js 설치 방법

1. Node.js 설치

먼저, Next.js를 사용하기 위해 Node.js가 설치되어 있어야 합니다. Node.js 공식 사이트에서 운영체제에 맞는 버전을 다운로드하고 설치합니다.

2. 새로운 Next.js 프로젝트 생성

Node.js 설치가 완료되면, 터미널(또는 명령 프롬프트)을 열어 새로운 Next.js 프로젝트를 생성합니다.
아래 명령어를 사용하여 진행합니다.

npx create-next-app@latest

위 명령어를 입력한 후, 프로젝트 이름을 입력하라는 메시지가 나타납니다.
저는 next-app-test 이라는 이름으로 프로젝트를 생성하였습니다.

What is your project named? >> next-app-test

이름을 입력하면 다음과 같이 프로젝트 설정 절차가 시작됩니다.
저는 아래와 같이 설정해 주었습니다.

① Would you like to use TypeScript? ... No / (Yes)

• 저는 코드의 품질과 유지보수성을 높여주기 위해 타입스크립트를 사용했습니다.

② Would you like to use ESLint? ... (No) / Yes

• 프로젝트에서 ESLint를 사용할지 여부를 묻는 질문입니다. ESLint는 JavaScript 및 TypeScript 코드의 품질을 향상시키기 위한 정적 코드 분석 도구입니다 (사용안할거임)

③ Would you like to use Tailwind CSS? ... (No) / Yes

• 프로젝트에서 Tailwind CSS를 사용할지 여부를 묻는 질문입니다. Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 빠르게 스타일을 적용할 수 있도록 돕습니다. 저는 테일윈드 CSS 또한 사용하지만 이번 프로젝트에서는 사용하지 않을 예정이기 때문에 No로 설정해주었습니다.

④ Would you like to use src/ directory? ... (No) / Yes

• 프로젝트에서 소스 코드를 src/ 디렉토리 하위에 배치할지 여부를 묻는 질문입니다. 저는 No로 설정해주었습니다.

⑤ Would you like to use App Router? (recommended) ... No / (Yes)

• Next.js의 App Router를 사용할지 여부를 묻는 질문입니다. App Router는 최신 Next.js 라우팅 방식으로, 파일 시스템 기반 라우팅을 지원합니다. Yes로 설정해줍니다.

⑥ Would you like to customize the default import alias(@/*)? ... (No) / Yes

• 프로젝트에서 기본 임포트 별칭을 커스터마이징할지 여부를 묻는 질문입니다. 임포트 별칭을 사용하면 상대 경로 대신 간결하고 일관된 경로를 사용할 수 있습니다. 저는 사용하지 않기에 No로 설정해줍니다.

3. 프로젝트 디렉토리로 이동

프로젝트 생성이 완료되면, 생성된 프로젝트 디렉토리로 이동합니다

cd next-app-test

4. 개발 서버 실행

이 명령어는 개발 모드에서 Next.js 애플리케이션을 실행합니다.

npm run dev

5. 실행 중인 Next.js 애플리케이션 확인

브라우저를 열고 아래 주소로 접속합니다. 실행 중인 Next.js 애플리케이션을 확인할 수 있습니다!

http://localhost:3000/

Next.js 프로젝트 구조

프로젝트가 생성되면 다음과 같은 기본 디렉토리 구조를 확인할 수 있습니다:

next-app-test-/
├── .next/
├── app/
│   ├── favicon.ico
│   └── globals.css
│   └── layout.tsx
│   └── page.module.css
│   └── page.tsx
├── node_modules/
├── public/
├── .gitignore
├── package.json
├── README.md
└── next.config.js

.next/ : Next.js가 빌드 시 생성하는 디렉토리입니다. 컴파일된 파일들과 캐시가 이곳에 저장됩니다.
app/ : Next.js에서 사용하는 디렉토리로, 페이지와 레이아웃을 정의합니다.
layout.tsx : 전체 애플리케이션의 레이아웃을 정의하는 파일입니다. 모든 페이지에 공통으로 적용되는 레이아웃을 설정할 수 있습니다.
page.tsx : 기본 페이지 컴포넌트를 정의하는 TypeScript 파일입니다. 이 파일이 기본 경로(/)의 페이지를 나타냅니다.
node_modules/ : 프로젝트에 설치된 npm 패키지들이 저장되는 디렉토리입니다.
public/ : 정적 파일을 저장하는 디렉토리로, 저는 이미지, 폰트 등을 이곳에 저장합니다.
package.json : 프로젝트에 대한 정보와 의존성, 스크립트 등을 정의하는 파일입니다. npm을 통해 패키지를 설치하고 관리하며, 프로젝트의 메타데이터를 포함합니다.
next.config.js : Next.js의 설정 파일입니다.Next.js의 동작을 커스터마이즈할 수 있는 다양한 설정을 포함합니다.

마치며

Next.js를 설치하고 기본적인 프로젝트를 생성하는 방법을 알아보았습니다.
Next.js는 강력한 기능과 편리한 개발 환경 덕분에 많은 개발자들이 선호하는 프레임워크입니다.
앞으로도 Next.js를 활용하여 다양한 웹 애플리케이션을 만들고 포스트해보겠습니다

Next.js에 대한 더 자세한 정보는 Next.js 공식 문서를 참고하시면 많은 도움이 될 것 같습니다!

그럼 HAPPY CODING!