Next.js - 첫 Next.js 앱

Next.js

Next.js by Vercel - The React Framework

Next.js by Vercel - The React Framework for the Web

를 시작해 보자

이미 만들어져 있는 노션 포트폴리오가 있긴 하지만, 너무 흔해 보여서 Next.js 프로젝트로 SSR 을 도전할 겸 한번 갱신해 보려고 한다

마침? 42월드에서도 SEO를 위해 Next.js 를 적극 도입하려는 시도가 있어 겸사겸사 스터디도 진행하고 내 포트폴리오도 업데이트하고 그러려고 한다

공식 문서 - About Next.js

https://nextjs.org/learn/foundations/about-nextjs

Next.js 란?

빠르게 웹 어플리케이션을 작성할 수 있는 부품들을 제공하는 유연한 리액트 프레임워크 라고 한다

이게 무슨 의미일까? 공식 문서에는 Next.js가 다음과 같은 영역에서 사용자의 어플리케이션 작성을 도와줄 수 있다고 한다

• 유저 인터페이스
• 라우팅 (페이지 내비게이션)
• 데이터 가져오기 (Data Fetching)
• 렌더링
• 서드파티 이식
• 앱 코드의 배포, 저장, 실행
• 성능
• 확장성
• 개발 경험

Next.js 는 React 의 프레임워크이고, 그렇다는 것은 React에서 필요한 설정이나 구조 등을 Next.js 에서 도와줌과 동시에 추가적인 구조나 기능, 최적화를 제공해준다고 한다

그렇다는 것은, React 로 UI를 짠 뒤에 내부 로직을 Next.js 의 기능들로 해결해 나갈 수 있다는 뜻

프레임워크인 Next.js 는 다음과 같은 일들을 해결해 준다고 한다

• 바벨이나 웹팩 등으로 트랜스파일링하는 작업
• 배포판 최적화
• SEO와 성능을 위한 사전 렌더링, 서버사이드 렌더링
• 리액트 앱과 데이터 저장소를 연결하는 서버사이드 코드 작성

공식 문서에서는 사용자 경험 (User Experience) 대신 개발자 경험 (Developer Experience) 을 향상시킨다고…

첫 번째 Next.js 앱 만들어 보기 - Create Next App

지금부터 간단한 Next.js 설정과 첫 번째 앱을 만들어 볼 것이다

여기서는 Create Next App을 써 보자

Create Next App을 사용하는 이유

Next.js 공식 문서에서 말하는 사용 이유는 다음과 같다

• 상호작용을 통한 앱 설정이 가능하다 (Interactive Experience)
  • create-next-app 을 어떠한 인자도 없이 실행시킬 경우, 상호작용을 통해 한 단계씩 앱을 설정해줄 수 있도록 도와주기 때문에 설정이 쉽다
• 의존성 없음 (Zero Dependencies)
  • Create Next App은 요구하는 의존성이 하나도 없기 때문에, 매우 빠르게 앱을 설정할 수 있다
• 오프라인에서도 사용 가능 (Offline Support)
  • 인터넷에 연결되어 있지 않아도, 자동으로 오프라인 여부를 체크해서 로컬 경로의 패키지 캐시를 통해 앱 설정을 도와준다
• 예제 지원 (Support for Examples)
  • Next.js 공식문서에 있는 예제들을 부트스트랩으로 사용하여 앱을 설정할 수 있도록 지원한다
• 테스트 완료 (Tested)
  • 이 패키지는 Next.js 모노레포의 일부분이며, Next.js 와 같은 테스트 과정을 거쳤으므로 모든 배포판에서 동일하게 동작함을 보장한다

Create Next App을 통한 레포지토리 설정

npx create-next-app@latest [프로젝트 경로] [옵션]

yarn create next-app [프로젝트 경로] [옵션]

pnpm create next-app [프로젝트 경로] [옵션]

프로젝트 경로는 해당 Next.js 프로젝트가 저장될 폴더명을 입력하면 되고, 현재 들어와있는 폴더에 추가하고 싶다면 .을 입력하면 된다

옵션 종류는 다음과 같다

• -V, --version
  • create-next-app의 버전명을 출력한다
• --ts, --typescript
  • 이 프로젝트에서 타입스크립트를 쓰겠다 (관련 설정 수행)
• --js, --javascript
  • 이 프로젝트에서 자바스크립트를 쓰겠다 (관련 설정 수행)
• --tailwind
  • 이 프로젝트에서 Tailwind CSS를 쓰겠다 (관련 설정 수행)
  • 기본값
• --no-tailwind
  • 이 프로젝트에서 Tailwind CSS를 쓰지 않겠다
  • 관련 설정을 스킵한다
• --eslint
  • 이 프로젝트에서 ESLint 사용하겠다 (관련 설정 수행)
• --experimental-app
  • 시험적으로 적용되는 폴더인 app 폴더를 사용할 것인지 여부
  • Next 13.4.0 부터 시범적용이 아니라 recommended 가 됐으니 주의!!
• --src-dir
  • src 폴더를 사용할 것인지에 대한 여부
• --import-alias <설정할 alias>
  • 절대경로 import 시에 최상단 폴더 (대개 src) alias를 어떤 문자열로 할 것인지 설정
  • 기본값은 @ 이다
• --use-npm
  • 앱 부트스트랩 시에 npm 쓰겠다
• --use-pnpm
  • 앱 부트스트랩 시에 pnpm 쓰겠다
• -e, --example [예제명 또는 깃허브 주소]
  • 앱 부트스트랩 시에 사용할 예제를 지정한다
  • Next.js 공식 문서에 나와있는 예제는 이름을 적으면 되고, 그 외의 경우 깃허브 주소를 적으면 해당 예제로 프로젝트를 설정한다
  • 브랜치, subdirectory 모두 가능
• --example-path [예제 경로]
  • 만약 브랜치명이나 예제에 슬래시 (/) 가 들어있을 경우, 해당 예제 경로를 본 옵션을 통해 별도로 지정해줘야 한다
• --reset-preferences
  • 저장된 설정값이 있다면 지워달라는 옵션
• -h, --help
  • 사용방법을 알려주는 옵션

 

일단 아무런 옵션 없이 npx create-next-app 을 했다

이것저것 질문을 물어본다 (CRA 쓸 때와 비슷)

• 프로젝트 이름은 무엇인지?
  • 경로를 입력하지 않았을 경우, 현 디렉토리에 해당 이름으로 폴더가 생성되고 모든 의존성 파일들이 저장된다
• Typescript 사용할 것인지?
  • 체크하면 Typescript 관련 의존성들이 설치된다
• ESLint 사용할 것인지?
  • 체크하면 마찬가지로 ESLint 관련 의존성들이 설치된다
• Tailwind CSS 사용할 것인지?
  • 체크하면 (마찬가지로) Tailwind 관련 의존성들이 설치된다
• src 경로 사용할 것인지?
  • 체크하면 경로를 만들어주고 tsconfig 에도 관련 설정을 추가해준다
• app 경로 사용할 것인지? (시험적)
  • 체크하면 경로를 만들어준다
  • Next 13.4.0 부터 시범적용이 아니라 recommended 가 됐으니 주의!!
• import alias 설정
  • 입력한 문자열로 import alias 를 tsconfig 에 추가해준다

물어보는 질문들이 다 플래그로도 설정할 수 있는 것들이긴 하다

 

모든 문항에 답변을 잘 했거나, 플래그를 잘 지정해주었다면 레포지토리 설정이 완료되며 몇몇 파일들이 생겨있다

어디서 많이 본 (React에서도 쓰던) 파일들이 꽤 있다

Create Next App 없이 레포 설정하기

아예 초장부터 전부 한땀한땀 설정하고 싶은 사람은 이쪽 옵션을 사용하자

설치 및 package.json 설정

npm install next react react-dom

yarn add next react react-dom

pnpm add next react react-dom

그냥 next, react, react-dom을 다 따로 설치한다

 

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

package.json 에 위의 4줄을 추가한다

• next dev
  • Next를 개발 모드로 구동시킨다
  • 핫 리로드로 개발을 빠르게 진행할 수 있다
• next build
  • Next로 어플리케이션을 배포판 빌딩한다
• next start
  • Next를 배포 모드로 구동시킨다
• next lint
  • Next.js 의 빌트인 ESLint 로 린터 체크한다
  • 모든 파일에서 린터 경고나 오류를 찾아내 전부 출력한다

폴더 추가 및 구성

루트 폴더에 다음의 두 폴더를 추가한다

• pages
  • Next.js 에서는 페이지를 파일 (.js, .jsx, .ts, .tsx) 단위로 구분하며, 이때 해당 파일들이 저장될 폴더가 pages이다
  • pages 폴더 안의 모든 파일들은 전부 파일명 = 실제 라우팅되는 페이지로 연결된다
  • 다이나믹 라우팅 또한 pages 폴더 하위의 폴더와 파일 이름으로 설정 가능하다 (Pages 포스팅에서 후술)
• public
  • 정적 애셋들 (이미지, 폰트 등) 이 들어가는 폴더이다
  • 코드상에서는 / 로 시작하는 절대경로를 통해 접근 가능하다

그리고 pages 폴더에 index.jsx 또는 index.tsx를 추가한다

이 파일은 Next.js 앱에 처음 접속했을 때 (루트 경로에서) 렌더링되는 컴포넌트이다

적절한 내용을 추가해 두자

실행시켜 보기

npm run dev (또는 yarn dev, pnpm dev) 를 통해 Next.js 서버를 개발 모드로 실행시킨다

기본 URL은 https://localhost:3000 으로, 이곳에 접속하면 pages/index.jsx 또는 pages/index.tsx 파일에 작성한 컴포넌트가 렌더링되는 것을 볼 수 있다

위의 과정 속에서 우리가 진행한 것

• 자동 컴파일 및 번들링
• 빠른 새로고침 (개발 모드에서의 핫 리로딩)
• 서버사이드 렌더링 및 정적 페이지 생성 (pages/index.jsx)
• public 폴더를 통한 정적 파일 전달

이제 막 Next.js 의 여정이 시작되었다

생각보다 기능이 매우 다양해서 전부 공부할 수 있을런지는 모르겠지만…

---

참고 자료

https://nextjs.org/docs/getting-started

Getting Started | Next.js