NextJS 공식문서 읽기

https://nextjs.org/docs

Next.js란?

풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크이다.

React 컴포넌트를 사용하여 UI를 구축하고 Next.js를 사용하여 추가적인 기능과 최적화 작업을 수행한다.

Next.js에서 번들링, 컴파일 등 React에 필요한 툴링을 추상화하여 자동으로 구성한다.

이를 통해 설정에 시간을 할애하는 대신 애플리케이션 구축을 하는데에 집중할 수 있다.

Next.js의 주요 특징

1. 라우팅

레이아웃, 중첩라우팅, 로딩, 에러 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터

2. 렌더링

클라이언트 및 서버 컴포넌트를 사용한 클라이언트 및 서버 측 렌더링
Next.js를 사용하는 서버에서 정적 및 동적 렌더링을 통해서 최적화했다.

3. 데이터 패칭

서버 컴포넌트에서 async/await 기능을 이용해서 데이터 가져오기를 간소화하고 요청 메모, 데이터 캐싱 및 재검증을 위한 확장된 fetch API를 제공한다.

4. 스타일링

CSS 모듈, 테일윈드, CSS-in-JS 등 선호하는 스타일링 방법 지원

5. 최적화

이미지, 글꼴 및 자바스크립트 최적화를 통해 응용 프로그램의 핵심 웹 바이탈, 사용자 환경을 개선할 수 있다. (최적화해서 성능을 좋게 했다.)

6. 타입스크립트

타입스크립트에 대한 향상된 지원

App router VS Page Router

Next.js에는 App router와 page router라는 두 개의 다룬 라우터가 있다.

앱 라우터는 서버 컴포넌트 및 스트리밍과 같은 리액트 최신 기능을 사용할 수 있는 최신 라우터이다.

페이지 라우터는 Next.js에서 기존에 사용하던 라우터로 서버가 렌더링 한 React 응용 프로그램을 구축할 수 있고, 이전 Next.js 응용 프로그램에서 계속 지원된다.

Next.JS 설치하기

시스템 요구사항

Node.js v18.17 이상
window(WSL포함), macOS, Linux 지원

자동 설치

$ npx create-next-app@latest

위의 명령어를 이용하여 앱을 시작한다. 명령어를 이용하면 자동으로 설정을 해준다.

명령어를 입력하게 되면 프롬프트가 나타나는데
프로젝트 이름, 타입스크립트, ESLint, 테일윈드, "src/" 디렉터리, App Router, alias, configured의 사용여부를 확인하여 프로젝트의 이름으로 디렉터리를 만들고 필요한 종속성을 설치한다.

수동 설치는... 공식문서에서 확인하기..
- https://nextjs.org/docs/getting-started/installation

디렉터리 만들기

Next.js는 파일 시스템 라우팅을 사용한다. 즉, 애플리케이션의 경로는 파일(디렉터리) 구조에 따라 결정된다.

app/ 디렉터리 밑에 layout.tsx와 page.tsx 파일을 추가하면 사용자가 애플리케이션의 루트로 진입할 때 렌더링 된다. (''/'')

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx

export default function Page() {
  return <h1> Hello, Next.js! </h1>
}

위와 같이 layout과 page의 초기를 설정할 수 있다.

public 디렉터리

이미지, 글꼴 등 정적 자산을 저장할 public 디렉터리를 만들고, public 디렉터리 내부의 파일은 기본 URL(/)에서 시작하는 코드로 참조할 수 있습니다.

개발 서버 실행

"npm run dev"를 이용해서 개발 서버를 실행할 수 있다.
실행 완료 후 'http://localhost:3000'로 애플리케이션을 볼 수 있다.
layout.tsx를 편집하고 저장하게 되면 브라우저에서 업데이트된 결과를 볼 수 있다.

사진 및 내용 출처 : NEXT 공식문서 (https://nextjs.org)

'FrontEnd > NEXT' 카테고리의 다른 글

Next 13 공식문서 읽기 (3) (0)	2023.11.07
Next 13 공식문서 읽기 (2) (0)	2023.11.05

Next 13 공식문서 읽기 (1)