NextJS란 무엇이며, 왜 사용되는 걸까?
react 프레임워크이며 react에 빌드된다.
React도 라이브러리인데 NextJS가 왜 필요할까?
NextJS는 react의 풀스택 프레임워크이며, 리액트로 풀스택 애플리케이션을 구축하는 과정을 단순화한다.
또한 최근에는 클라이언트 측 단일 페이지 애플리케이션이 아닌 풀스택 애플리케이션을 구축하는 추세이다.
리액트 라이브러리 자체에도 서버에서 리액트 사용을 더 쉽게 하기 위해 기능을 점점 추가하고 있고,
특히 서버에서 컴포넌트를 렌더링 할 수 있게 업데이트하고 있다.
그러나 풀스택 애플리케이션을 구축하려면 더 필요한 것들이 많은데,
- form 제출 처리
- 데이터 가저오기
- 사용자인증
과 같은 것들을 NextJS가 제공한다.
따라서 리액트를 기반으로 구축한 다음 리액트로 풀스택 애플리케이션을 구축하는 과정을 대폭 간소화한다.
NextJS 주요기능 및 장점
NextJS의 가장 큰 장점은 풀스택 앱을 구축하는 것이지만 장점은 이 뿐만이 아니다.
NextJS의 또 다른 장점은 파일 시스템을 사용하여 경로를 설정할 수 있다는 것이다.
일반적으로 React Router 같은 바닐라 자바스크립트에서 하는 것처럼 코드를 사용하여 환경설정하는 대신
NextJS에서는 파일 시스템으로 환경설정한다. 즉, 다양한 폴더와 파일을 설치하여 사용자가 방문할 수 있는 경로로 매핑한다. 이 접근 방식의 장점은 코드 기반 환경설정 또는 패키지가 NextJS에 내장되어 추가로 필요하지 않다는 것이다.
또한, NextJS가 페이지에 보이는 모든 내용을 렌더링한다는 것이다. 이는 모든 페이지, 서버의 컴포넌트 등을 포함한다. 이것은 결국 유선으로 전송되는 컨텐츠인 HTML 문서에 화면에 표시되어야 할 모든 컨텐츠가 포함된다는 것을 의미한다. 대부분 비어있고 클라이언트에 채워진 바닐라 자바스크립트와 비교할 수 있다.
여기서의 장점은 예를 들어 검색 엔진 크롤러도 완성된 컨텐츠를 볼 수 있다는 것이다.
첫 번째 NextJS 앱 만들기
NextJS 공식 홈페이지인 nextjs.org에 들어가면 새로운 NextJS 프로젝트를 생성하는 명령어가 있다.
npx create-next-app@latest이 명령어를 실행하면 아래와 같이 나오게 되는데,
나는 단순히 첫 NextJS앱을 만들어 보기 위해 아래와 같이 선택했다.
그 다음 생성된 디렉토리로 이동해 개발 서버를 실행해보자.
cd my-app
npm run dev실행이 될 경우 아래와 같은 내용이 터미널에 표시되게 된다.
터미널에 표시된 주소로 접속을 해보면 아래와 같은 페이지가 표시된다.
파일 시스템을 통해 새로운 페이지 추가하기
app/ 폴더 아래 새로운 폴더 생성
awesome 폴더아래 page.js 파일 생성
폴더명과 page.js 파일이 합쳐져야 NextJS에서 신규 경로가 생성된다.
그 다음 page.js에 표준 리액트 컴포넌트 함수를 export 한다.
NextJS에서 페이지는 단순히 리액트 함수이다.
export default function AwesomePage() {
return (
<main>
<h1>NextJS is Awesome!</h1>
</main>
);
}그 다음 NextJS 애플리케이션으로 돌아가 localhost:3000/awesome 으로 접속하면
아래와 같은 화면이 나오게 된다.
Pages Router vs App Router
NextJS 앱을 만들기 위해 두 가지 방식이 존재한다.
어떤 방식을 선택해도 풀스택 애플리케이션을 만드는 것이기 때문에 페이지가 서버에 렌더링 되고, 파일 시스템으로 경로를 설정하게 된다.
Pages Router는 더 오래된 방식이다.
다년간 사용된 방식으로 아주 안정적인 방법이다.
App Router는 NextJS 13 버전에 등장한 비교적 새로운 방식이다.
안정적이게 되고 있으나 아직 부분적으로 버그가 발생하는 경향이 있다.
리액트 서버 컴포넌트 또는 Server Actions 과 같은 다양한 최신 기능을 사용할 수 있다.
