Next.js는 개발자가 빠른 서버 렌더링 애플리케이션을 만들 수 있는 인기 있는 React 프레임워크입니다. SSG(정적 사이트 생성), SSR(서버 측 렌더링) 및 API 경로와 같은 강력한 기능을 즉시 제공합니다. 이 가이드에서는 핵심 개념과 실제 사례에 초점을 맞춰 첫 번째 Next.js 애플리케이션을 구축하는 과정을 안내합니다.

1. Next.js 프로젝트 설정

Next.js를 시작하려면 컴퓨터에 Node.js가 설치되어 있어야 합니다. Node.js를 설정한 후에는 다음 명령을 사용하여 새로운 Next.js 애플리케이션을 생성할 수 있습니다:

npx create-next-app my-next-app

이 명령은 Next.js 애플리케이션을 시작하는 데 필요한 모든 파일과 종속성을 포함하는 my-next-app이라는 새 디렉터리를 생성합니다.

2. 프로젝트 구조 탐색

프로젝트를 생성한 후 프로젝트 디렉터리로 이동합니다:

cd my-next-app

my-next-app 디렉토리 내에서 다음과 유사한 구조를 찾을 수 있습니다.

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

페이지 디렉토리는 애플리케이션의 페이지를 생성하는 곳이고 공개 디렉토리는 정적 자산을 위한 것입니다.

3. 첫 페이지 만들기

Next.js는 파일 기반 라우팅 시스템을 사용합니다. 새 페이지를 만들려면 페이지 디렉터리에 새 JavaScript 파일을 추가하기만 하면 됩니다. 예를 들어 about.js:
라는 파일을 만듭니다.

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    

      
About Page
      
This is the about page of my first Next.js application!
      Go back home
    
  );
}

이 예에서는 간단한 정보 페이지를 만들고 링크 구성요소를 사용하여 홈 페이지로 다시 이동했습니다.

4. 홈 페이지 수정

페이지 디렉토리에서 index.js 파일을 엽니다. 이 파일은 애플리케이션의 홈 페이지를 나타냅니다. 다음과 같이 수정할 수 있습니다:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    

      
Welcome to My Next.js App
      

        This is my first application built with Next.js.{' '}
        Learn more about me
      
    
  );
}

여기에 간단한 스타일과 정보 페이지에 대한 링크를 추가했습니다.

5. 애플리케이션에 스타일 추가하기

Next.js는 기본적으로 CSS 모듈을 지원합니다. 구성 요소의 스타일을 지정하려면 스타일 디렉터리에 CSS 모듈을 생성하면 됩니다. 예를 들어 Home.module.css:
라는 파일을 만듭니다.

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

다음으로, 이전 섹션에 표시된 대로 이 CSS 모듈을 index.js 페이지로 가져옵니다.

6. Next.js로 데이터 가져오기

Next.js를 사용하면 정적 사이트 생성을 위한 getStaticProps 또는 서버 측 렌더링을 위한 getServerSideProps를 사용하여 데이터를 쉽게 가져올 수 있습니다. 예를 들어 홈 페이지에서 데이터를 가져오려면 다음과 같이 index.js를 수정할 수 있습니다.

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    

      
Welcome to My Next.js App
      

        {posts.map(post => (
          
{post.title}
        ))}
      
    
  );
}

이 코드에서는 공개 API에서 게시물 목록을 가져와 홈페이지에 표시합니다.

7. API 경로 생성

Next.js를 사용하면 페이지/api 디렉터리에 API 경로를 생성할 수 있습니다. 이러한 경로는 백엔드 기능을 구축하는 데 사용될 수 있습니다. 예를 들어, Pages/api 디렉터리에 hello.js라는 파일을 생성합니다:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

http://localhost:3000/api/hello로 이동하여 이 API 경로에 액세스할 수 있습니다.

8. Next.js 애플리케이션 배포

애플리케이션이 준비되면 쉽게 배포할 수 있습니다. Vercel은 Next.js 애플리케이션에 권장되는 호스팅 플랫폼입니다. 다음 단계에 따라 앱을 배포할 수 있습니다.

1. Vercel 계정이 없다면 계정을 만드세요.

2. Vercel CLI를 전역적으로 설치합니다.
   

   npm install -g vercel
   

3. 프로젝트 디렉터리에서 다음 명령을 실행합니다.
   

   vercel
   

4. 메시지에 따라 애플리케이션을 배포하세요.

9. 동적 라우팅 추가

Next.js는 대괄호를 사용한 동적 라우팅을 지원합니다. 예를 들어, 동적 블로그 게시물 페이지를 생성하려는 경우 페이지/포스트 디렉터리에 [id].js라는 파일을 생성할 수 있습니다:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return 
Post: {id}
;
}

이제 /posts/1, /posts/2 등으로 이동하여 특정 게시물에 액세스할 수 있습니다.

10. 글로벌 스타일 구현

애플리케이션에 전역 스타일을 적용하려면 페이지 디렉토리에 _app.js라는 파일을 생성하면 됩니다.

// pages/_app.js
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return ;
}

다음으로 스타일 디렉터리에 globals.css 파일을 만들고 전역 스타일을 추가합니다.

/* styles/globals.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

11. 환경 변수 사용

Next.js는 민감한 정보를 저장하는 환경 변수를 지원합니다. 프로젝트 루트에 .env.local 파일을 생성하고 변수를 추가할 수 있습니다:

API_URL=https://example.com/api

그런 다음 process.env를 사용하여 애플리케이션에서 이 변수에 액세스할 수 있습니다:

// Example usage in a component
const apiUrl = process.env.API_URL;

첫 번째 Next.js 애플리케이션 구축을 축하합니다! 이 여정을 통해 프로젝트를 설정하고, 동적 페이지를 생성하고, 데이터를 원활하게 가져오고, 강력한 라우팅을 구현하고, 애플리케이션을 쉽게 배포하는 방법을 배웠습니다.

Next.js는 단순한 프레임워크 그 이상입니다. 이는 웹 개발 경험을 크게 향상시킬 수 있는 강력한 도구입니다. SSG(정적 사이트 생성) 및 SSR(서버 측 렌더링)과 같은 내장 기능을 사용하면 성능과 SEO에 최적화된 빠르고 사용자 친화적인 애플리케이션을 만들 수 있습니다.

Next.js 여정의 다음 단계

이제 첫 번째 Next.js 애플리케이션을 성공적으로 구축했으므로 기술을 다음 단계로 끌어올릴 차례입니다. 다가오는 이번 게시물 시리즈에서는 애플리케이션을 향상하고 개발 프로세스를 간소화할 수 있는 Next.js의 고급 기능 중 일부에 대해 더 자세히 알아볼 것입니다.

미들웨어는 요청이 완료되기 전에 사용자 정의 로직을 추가하여 애플리케이션의 기능을 확장할 수 있는 강력한 기능입니다. 즉, 요청 및 응답 개체를 조작하고, 사용자를 인증하고, 리디렉션을 원활하게 관리할 수도 있습니다.

다음으로 SSG(정적 사이트 생성)를 살펴보겠습니다. 이 기술은 빌드 시 페이지를 사전 렌더링하여 빠른 로딩 속도와 향상된 SEO 성능을 제공합니다. SSG를 활용하는 방법을 이해하면 동적일 뿐만 아니라 놀라울 정도로 효율적인 애플리케이션을 만들 수 있습니다.

마지막으로 Next.js 애플리케이션 내에서 직접 서버리스 기능을 구축할 수 있는 기능인 API 경로를 다루겠습니다. 즉, 별도의 서버 없이 요청과 응답을 처리할 수 있어 더 적은 오버헤드로 풀스택 애플리케이션을 더 쉽게 개발할 수 있습니다.

Next.js의 고급 기능을 향한 흥미진진한 여정을 시작하려면 저를 따라오세요. 이러한 도구를 마음대로 사용하면 정말 눈에 띄는 강력한 고성능 애플리케이션을 구축할 수 있습니다. 다음 게시물을 기대해주세요!

이 게시물은 다음에서도 읽을 수 있습니다.

Next.js 소개: 첫 번째 애플리케이션 구축

Next.js는 개발자가 빠른 서버 렌더링 애플리케이션을 만들 수 있게 해주는 인기 있는 React 프레임워크입니다. 기본적으로 강력한 기능을 제공합니다!

salmaniyad.hashnode.dev

다음에서 나를 찾으세요:

SalmanIyad · GitHub

컴퓨터 시스템 엔지니어 | 웹 개발자. SalmanIyad에는 31개의 저장소가 있습니다. GitHub에서 코드를 따르세요.

github.com