Next.js에 대해서

안녕하세요.

공대남입니다.

오늘은 Next.js에 대해서 포스팅 해보겠습니다.

 

1. Next.js란?

넥스트 닷 제이에스(Next.js)는 리액트(React) 기반의 서버 사이드 렌더링(SSR) 및 정적 웹사이트 생성기(Static Site Generator)입니다.

Next.js는 웹 개발을 간편하게 해주는 여러 기능들을 제공하며, 더 나은 사용자 경험을 제공하기 위해 서버 사이드 렌더링 기능을 제공합니다.

 

Next.js 주요 기능

1. 서버 사이드 렌더링(SSR)
2. 정적 웹사이트 생성기(Static Site Generator)
3. 코드 스플리팅(Code Splitting)
4. 클라이언트 사이드 라우팅(Client-Side Routing)
5. 페이지 단위 코드 실행(Page-based code execution)
6. Hot Module Replacement(HMR)

이러한 기능들은 개발자가 빠르게 웹 애플리케이션을 구축할 수 있도록 도와주며, 더 나은 사용자 경험을 제공할 수 있게 해줍니다.

 

Next.js는 Node.js환경에서 실행되고, React, Webpack, Babel 등의 기술 스택을 사용합니다. 또한, Next.js는 Vercel 플랫폼에서 호스팅되어 더 나은 배포 환경을 제공합니다.

 

Next.js를 사용하면 서버 사이드 렌더링, 정적 웹사이트 생성 등 편리하게 구현할 수 있고, 코드 스플리팅, 클라이언트 사이드 라우팅 등을 통해 더 나은 환경을 제공합니다. 

 

Next.js는 React기반 툴들을 제공하기 때문에 React 개발자라면 Next.js를 배워보는것이 좋습니다.

 

2. 웹 구축 실습

뭐 대충 내용은 저렇습니다. 바로 실습해보시죠. (개발자들은 실습을 좋아합니다.)

 

- 우선 설치부터 합시다~

터미널에서 명령어를 칩니다.

npm install next react react-dom

그 다음으로, 프로젝트 디렉토리를 생성합니다. 아래 명령어를 실행하세요.

mkdir my-app
cd my-app

 

그리고, pages 폴더를 생성합니다. 이 폴더는 Next.js에서 페이지를 구성하는 데 사용됩니다.

mkdir pages

이제 pages/index.js 파일을 만들어 보겠습니다. 이 파일은 기본 페이지로 사용됩니다.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

그리고 package.json 파일을 수정하여 Next.js를 실행하는데 필요한 스크립트를 추가합니다.

{
  "name": "my-app",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

이제, 명령어를 실행하여 개발 서버를 시작해봅시다!

npm run dev

브라우저에서 http://localhost:3000에 접속하면 Welcome to Next.js라는 메시지가 표시됩니다~

이렇게 간단하게 웹을 구축해보았습니다.

이제 여기에 CSS, 데이터 등 다양한 기능을 추가하면 됩니다.