이 글은 초보자에게 친숙한 가이드이자 Next.js 작업 단계를 제공합니다.

Next.js는 웹 애플리케이션 구축을 위한 유연한 프레임워크입니다. 오히려 Node.js 위에 구축된 반응 프레임워크입니다.

Next.js 프로젝트 설정
새로운 Next.js 프로젝트를 시작하려면 컴퓨터에 Node.js가 설치되어 있어야 합니다.

설치
설치 시 터미널을 열고 다음 명령을 실행하여 새 Next.js 프로젝트를 만듭니다. npx create-next-app@latest my-nextjs-app
Next.js는 기존 코드베이스에 익숙해지도록 실제 개발을 반영하는 이미 작성된 코드를 제공합니다.
설치가 완료되면 프로젝트 디렉터리로 이동하여 개발 서버를 실행합니다:
CD my-nextjs-app
npm 실행 개발

폴더 구조
일반적인 Next.js 프로젝트 구조는 여러 주요 폴더로 구성됩니다:

• 페이지/: 이 폴더에는 애플리케이션의 경로를 정의하는 파일이 포함되어 있습니다. 이 폴더의 각 파일은 경로에 해당합니다.
• public/: 이미지, 글꼴, 아이콘과 같은 정적 자산을 저장할 수 있는 곳입니다. 여기의 파일은 URL을 통해 액세스할 수 있습니다.
• styles/: 이 폴더에는 전역 및 구성 요소별 스타일이 들어 있습니다. 기본적으로 전역 CSS 파일이 포함되어 있습니다.
• 컴포넌트/: 재사용 가능한 React 컴포넌트.
• api/: 서버 측 기능에 사용되는 API 경로(선택 사항).

Nextjs는 다음과 같은 다양한 내장 기능을 제공하므로 선호되는 프레임워크입니다.

1. 더 빠른 페이지 로드를 위한 자동 코드 분할.- Next.js는 자동으로 코드 분할을 수행하므로 각 페이지는 해당 페이지에 필요한 것만 로드합니다. 이는 다른 페이지의 코드가 처음에 제공되지 않음을 의미합니다.

2. 최적화된 프리페칭을 사용한 클라이언트측 라우팅.

   • 페이지 아래에 파일로 경로를 생성하고 내장된 링크 구성 요소를 사용하여 해당 경로에 연결합니다. 라우팅 라이브러리가 필요하지 않습니다.
   • 링크 구성 요소( 태그의 Next.js 버전)가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 링크된 페이지의 코드를 자동으로 프리페치합니다. 따라서 사용자가 링크를 클릭할 때쯤에는 대상 페이지의 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 즉각적으로 이루어집니다.

3. 직관적인 페이지 기반 라우팅 시스템(동적 경로 지원)

4. 사전 렌더링, 정적 생성(SSG) 및 서버 측 렌더링(SSR)이 페이지별로 지원됩니다. - 클라이언트측 JavaScript로 HTML을 생성하는 대신 각 페이지에 대해 미리 HTML을 생성합니다.

5. 데이터를 사전 렌더링할 필요가 없다면 다음과 같은 클라이언트 측 렌더링이라는 전략을 사용할 수도 있습니다.

   1. 외부 데이터가 필요하지 않은 페이지 부분을 정적으로 생성(사전 렌더링)합니다.
   2. 페이지가 로드되면 JavaScript를 사용하여 클라이언트에서 외부 데이터를 가져오고 나머지 부분을 채웁니다.

6. 내장 CSS 및 Sass 지원은 모든 CSS-in-JS 라이브러리에서 사용할 수 있습니다.

7. 빠른 새로 고침을 지원하는 개발 환경.

8. 서버리스 기능으로 API 엔드포인트를 구축하기 위한 API 경로

9. Next.js는 API 경로를 지원하므로 API 엔드포인트를 Node.js 서버리스 기능으로 쉽게 생성할 수 있습니다. 페이지/api 디렉토리 내에 함수를 생성하면 그렇게 할 수 있습니다.

10. 완전히 확장 가능.

결론
Next.js를 시작하는 것은 간단하며 프레임워크는 유연성과 사용 편의성 사이의 탁월한 균형을 제공합니다. 개인 블로그, 기업 웹사이트, 복잡한 웹 애플리케이션 등 무엇을 구축하든 Next.js는 확장 가능하고 성능이 뛰어난 앱을 빠르게 구축하는 데 도움이 되는 도구와 기능을 제공합니다.