Next.js 초기 셋팅

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 다양한 기능을 제공합니다.

 Next.js를 사용하면 빠르고 최적화된 웹 애플리케이션을 쉽게 구축할 수 있습니다. 

여기에 Next.js 프로젝트를 시작하는 기본적인 방법을 안내합니다.

1. Node.js 설치
Next.js를 사용하기 전에, Node.js가 설치되어 있어야 합니다. Node.js는 Next.js가 실행되는 환경을 제공합니다. Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치할 수 있습니다.

 

 2. 프로젝트 생성
프로젝트 디렉토리를 생성하고, 해당 디렉토리에서 Next.js 애플리케이션을 초기화하려면 다음 명령어를 사용합니다.

npx create-next-app@latest

 

또는 특정 프로젝트 이름을 사용하여 생성하고자 한다면, 다음과 같이 실행합니다.

npx create-next-app@latest 프로젝트-이름

이 명령어는 필요한 Next.js와 React 의존성을 포함한 새 프로젝트를 생성합니다.

3. 개발 서버 실행
프로젝트 디렉토리로 이동한 다음, 개발 서버를 시작합니다.

cd 프로젝트-이름
npm run dev

기본적으로, Next.js 개발 서버는 `http://localhost:3000`에서 실행됩니다. 웹 브라우저를 통해 이 주소에 접속하면, Next.js 애플리케이션의 시작 페이지를 볼 수 있습니다.

4. 프로젝트 구조
Next.js 프로젝트의 기본 구조는 다음과 같습니다.

- `pages/` 디렉토리: 여기에 애플리케이션의 페이지 컴포넌트를 저장합니다. Next.js는 이 디렉토리 내의 파일 구조를 기반으로 라우팅을 자동으로 처리합니다.

- `public/` 디렉토리: 정적 파일(이미지, 폰트 등)을 저장하는 곳입니다.

- `styles/` 디렉토리: CSS 파일을 저장합니다.

- `next.config.js`: Next.js의 설정 파일입니다. 필요에 따라 여기서 애플리케이션의 구성을 커스텀할 수 있습니다.

5. 첫 페이지 생성
`pages/index.js` 파일을 편집하여 첫 페이지를 구성할 수 있습니다. React 컴포넌트 형태로 페이지를 구성하며, Next.js는 이 파일을 애플리케이션의 홈페이지로 사용합니다.

Next.js에 대해 더 깊이 배우고 싶다면, 공식 문서를 참고하는 것이 좋습니다. Next.js는 다양한 예제와 함께 상세한 가이드를 제공하여, 개발자가 웹 애플리케이션을 효율적으로 구축할 수 있도록 돕습니다.