Next.js 프로젝트의 기본 설정과 첫 페이지 개발: 프로젝트 생성부터 첫 페이지까지의 구현 과정.

작성일 : 2024-07-03

Next.js 프로젝트의 기본 설정과 첫 페이지 개발

Next.js는 React를 기반으로 한 프레임워크로, 서버 측 렌더링(Server-Side Rendering)과 정적 웹사이트 생성을 지원합니다. 이 글에서는 Next.js 프로젝트를 처음부터 설정하고 첫 페이지를 개발하는 과정을 소개합니다.

프로젝트 생성

먼저, Next.js 프로젝트를 생성하기 위해 다음 단계를 따릅니다. 프로젝트 생성에는 공식 철인 create-next-app을 사용합니다.

터미널(명령 프롬프트)에서 다음 명령어를 입력해 새로운 Next.js 프로젝트를 생성합니다.
```
bash
npx create-next-app my-nextjs-app
```
여기서 my-nextjs-app은 프로젝트 디렉토리 이름입니다. 원하는 이름으로 변경할 수 있습니다.
디렉토리로 이동합니다.
```
bash
cd my-nextjs-app
```

프로젝트가 성공적으로 생성되면, 디렉토리 구조를 확인해볼 수 있습니다.


plaintext
my-nextjs-app
├── pages
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
├── styles
├── .gitignore
├── package.json
└── README.md

프로젝트를 시작하기 전 종속성을 설치합니다.
```
bash
npm install
```
또는 Yarn을 사용하는 경우에는 다음 명령어를 입력합니다.
```
bash
yarn
```
설치가 완료되면 개발 서버를 시작합니다.
```
bash
npm run dev
```
역시 Yarn을 사용하는 경우는 다음 명령어를 사용합니다.
```
bash
yarn dev
```
그러면 http://localhost:3000에서 프로젝트를 확인할 수 있습니다.

첫 페이지 생성

Next.js에서는 기본적으로 pages 디렉토리 내 파일들이 각각의 라우트가 됩니다. 이제 첫 페이지를 만들어 보겠습니다.

pages 디렉토리 내에 index.js 파일을 열어 기본 페이지를 확인합니다.


js
export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

index.js 파일을 수정하여 첫 페이지를 커스터마이즈합니다. 다음은 간단한 예제입니다:


js
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My First Next.js Page</title>
      </Head>
      <main>
        <h1>Hello, Next.js!</h1>
        <p>This is my first Next.js page.</p>
      </main>
    </div>
  );
}

이 코드는 Head 컴포넌트를 사용하여 SEO(검색엔진최적화)를 개선합니다. Head 컴포넌트는 HTML <head> 태그에 삽입할 요소들을 정의합니다.

페이지를 꾸미기 위해 CSS를 추가합니다. styles 디렉토리 내에 Home.module.css 파일을 생성하고 다음 스타일을 추가합니다.


css
main {
  padding: 20px;
  text-align: center;
}

index.js 파일에 CSS 모듈을 불러와 적용합니다.


js
import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div>
      <Head>
        <title>My First Next.js Page</title>
      </Head>
      <main className={styles.main}>
        <h1>Hello, Next.js!</h1>
        <p>This is my first Next.js page.</p>
      </main>
    </div>
  );
}

개발 서버를 재시작하지 않아도 변경사항이 자동으로 반영됩니다. 브라우저에서 페이지를 확인하여 디자인이 적용되었는지 확인합니다.

API 라우트 설정

Next.js는 간단하게 API 라우트를 설정할 수 있는 기능도 제공합니다. 이러한 API는 서버리스 함수로 동작하며, pages/api 디렉토리 내에 파일을 생성하면 자동으로 라우팅됩니다.

pages/api 디렉토리 내에 hello.js 파일을 수정하여 간단한 API를 만듭니다.


js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, API!' });
}

http://localhost:3000/api/hello로 이동하여 API 응답을 확인합니다.


json
{
  "message": "Hello, API!"
}

이로써 Next.js 프로젝트의 기본 설정과 첫 페이지를 성공적으로 개발하였습니다. 이를 통해 Next.js의 강력하고 편리한 기능을 활용할 수 있는 기초를 확보하게 되었습니다. 여기에서 더 나아가 다양한 기능을 추가하고 응용해 보세요.