Next.js 소개 가이드

Next.js는 프로덕션에 필요한 모든 기능과 함께 제공되는 React 프레임워크입니다. "바닐라"React 앱에서 직접 설치하고 처리할 수 있는 여러 기능이 함께 제공되기 때문에 최고의 개발자 경험을 제공합니다. 이 가이드에서는 먼저 Next가 무엇인지, 왜 그러한 도구를 사용하는지 설명하고 이를 사용하여 기본 앱을 만들어 Next.js를 소개합니다.


이 기사는 Next.js에 대한 시리즈의 일부입니다. 가치 있는 기사를 찾으셨다면 subscribe to my newsletter 부담 없이 받은 편지함에 다음 기사를 받아보세요.

If you're interested in learning Next.js in a comprehensive way, I highly recommend this bestseller course.

다이빙하자.

Next.js가 무엇인가요?

Next.js는 React, Node.js, Babel 및 Webpack으로 구축된 프레임워크입니다. 기본적으로 "바닐라"React 앱에서는 사용할 수 없는 편리한 기능이 함께 제공됩니다.

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js를 사용하면 웹사이트를 정적으로 HTML로 내보내거나 서버에서 렌더링할 수 있습니다. 결국에는 필요한 JavaScript만 브라우저에 로드되기 때문에 코드를 자동으로 분할하므로 번들 크기가 작아지고 앱이 빨라집니다.

Next.js는 파일 시스템 기반 라우팅을 사용하여 앱에서 라우팅을 활성화합니다. 자동으로 pages 폴더에 있는 파일을 경로로 사용하므로 Next로 다중 페이지 앱을 빌드하기 위해 추가 라이브러리를 추가할 필요조차 없습니다.

Next.js 프레임워크는 API 경로를 사용하여 API를 빌드하기 위한 간단한 솔루션을 제공합니다. GraphQL, Express 또는 선호하는 프레임워크로 전체 API를 구축한 다음 API 경로를 사용하여 데이터베이스에 연결할 수 있습니다. Next.js는 pages/api 디렉토리 아래의 파일을 API 엔드포인트로 취급합니다.

React와 달리 Next는 Styled JSX, Sass, CSS 모듈 등을 기본적으로 지원하므로 Next.js 앱의 스타일을 쉽게 지정할 수 있습니다.

다음 앱 만들기

Next.js 앱은 수동으로 만들거나 다음 앱 만들기를 사용하여 만들 수 있습니다. 후자는 권장되는 방법이므로 모든 것을 자동으로 설정합니다.

따라서 CLI(명령줄 인터페이스)를 열고 다음 명령을 실행합니다.

  npx create-next-app my-app

프로젝트가 생성되면 이제 파일 구조를 살펴보겠습니다.

파일 구조

├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md

앞에서 언급했듯이 Next.js는 파일 시스템을 사용하여 앱에서 라우팅을 활성화합니다. 여기서 index.js 파일은 프로젝트의 홈 페이지입니다. pages 폴더에 새 파일을 추가하면 경로로 취급됩니다.

Create Next App은 기본적으로 api 폴더와 함께 제공되며, 이는 hello.js 파일이 API 엔드포인트임을 의미합니다. API 경로http://localhost:3000/api/hello에 도달하면 서버에서 응답을 받게 됩니다.

Next.js는 앱 구성 요소를 사용하여 페이지를 초기화합니다. _app.js 파일을 사용하면 구성 요소의 기본 동작을 재정의할 수 있습니다. 구성 요소 간에 공유해야 하는 전역 스타일이나 데이터가 있는 경우 여기에 입력하세요. 그런데 밑줄 기호( _ )는 파일을 경로로 사용하지 않도록 Next.js에 지시합니다.

이를 통해 이제 터미널에서 다음 명령을 실행하여 프로젝트를 미리 볼 수 있습니다.

  yarn dev

또는 npm

  npm run dev

브라우저에서 방문하자http://localhost:3000


엄청난! 이제 Next.js에 대한 소개를 마쳤습니다. 시리즈의 다음 부분에서 Next.js 정적 및 동적 라우팅에 대해 자세히 알아볼 것입니다.

읽어주셔서 감사합니다. 다음에 뵙겠습니다.

my blog에서 이와 같은 다른 멋진 콘텐츠를 찾거나 나를 팔로우하여 알림을 받을 수 있습니다.