Next.js 배우기 1(React에서 Next.js)
1. Next.js와 React의 차이 2.Next.js 개발 환경 설정
최근 회사 내 대다수의 외국인 개발자(베트남, 인도 등)들이 사용하고 있고, 또 사용하길 원하여 Next.js를 급하게 배우게 되었습니다. (라우팅이 사전에 다 되어 나오는 것, 코드가 나름 (?) 정형화가 되어 있는 것, 개발 속도가 매우매우 빨라질 수 있다. 등의 다양한 이점이 존재합니다.) 기존 React를 사용하는 개발자라면 금새 배우실 수 있을 것입니다.
Next.js를 공부 하기전 알아야할 사전 지식은 아래와 같습니다.
Next.js를 공부하기 전에는 HTML, CSS, JavaScript와 같은 웹 개발 기술에 대한 기본적인 이해가 필요합니다. React는 유저 인터페이스를 구축하기 위한 JavaScript 라이브러리이고, Next.js는 이를 기반으로 구축되었기 때문에 React에 대한 이해도 매우 중요합니다.
또한 서버 사이드 렌더링, 클라이언트 사이드 렌더링 및 API의 역할과 같은 웹 애플리케이션 개발 개념에 대한 좋은 이해도가 있으면 좋습니다. Node.js, JavaScript 런타임 환경과 그 생태계에 대한 지식은 플러스입니다.
또한 Git과 같은 버전 관리 시스템에 대한 경험, 사용법에 대한 이해도가 있으면 더욱 좋습니다.
하지만 개인적으로는 자바스크립트, React (HTML, CSS는 굳이 언급하지 않겠습니다.) 정도에 익숙하면 충분하다고 생각합니다.
✔️ Next.js 사전 지식
React(jsx 문법, useState/useEffect 사용법)
git 사용법
yarn(또는 npm) 사용법
TypeScript 문법
Next.js 소개
Next.js의 장점
Next.js는 리액트 기반의 서버사이드 렌더링 프레임워크입니다. 이는 웹 개발에서 매우 중요한 성능 및 사용성 개선 기능을 제공하는데요.
일단 Next.js는 검색 엔진 최적화(SEO)에 유리합니다. 서버사이드 렌더링으로, 모든 페이지에 대한 HTML 마크업이 서버에서 생성됩니다. 이는 검색 엔진에서 해당 페이지를 더 잘 인식하고 색인화하는 데 도움이 됩니다.
또한, Next.js는 페이지 로딩 속도를 크게 개선합니다. 서버사이드 렌더링으로, 페이지가 완전히 로드되기 전에 사용자에게 보여지는 콘텐츠가 있습니다. 이는 초기 로딩 시간을 단축하고 사용자 경험을 향상시킵니다.
또한, Next.js는 개발 생산성을 높입니다. 자동 코드 분할, 환경 변수, TypeScript 지원 등과 같은 기능을 제공합니다. 이는 개발자가 빠르게 프로젝트를 구축하고 유지 보수하는 데 도움이 됩니다.
마지막으로, Next.js는 확장성이 높습니다. Vercel과 같은 클라우드 플랫폼에서 쉽게 배포할 수 있으며, 서버리스 아키텍처와 함께 사용할 수 있습니다. 이는 애플리케이션 규모가 커질수록 유용합니다.
Next.js VS React 차이
Next.js와 React는 모두 자바스크립트 라이브러리이며, React는 프론트엔드 웹 개발에 가장 널리 사용되는 라이브러리 중 하나입니다. 반면에, Next.js는 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(Static Site Generation, SSG)과 같은 기능을 제공하는 프레임워크입니다.
Next.js와 React 간의 차이
1. 서버 사이드 렌더링 (SSR)
React는 클라이언트 측에서만 렌더링되지만, Next.js는 서버 측에서도 렌더링할 수 있습니다.
SSR은 페이지 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 개선하는 데 도움이 됩니다.
2. 정적 사이트 생성 (SSG)
Next.js는 빌드 시점에 페이지를 렌더링하고 HTML 파일을 생성하여 정적 사이트를 생성할 수 있습니다.
SSG는 페이지 로딩 속도를 더욱 빠르게 만들며, CDN과 같은 캐싱 기술을 사용할 수 있습니다.
3. 파일 시스템 기반 라우팅
Next.js는 파일 시스템 기반 라우팅을 사용합니다.
이것은 개발자가 페이지 및 경로를 생성하고 구성하는 데 더욱 편리하고 직관적인 방법을 제공합니다.
4. 개발 생산성
Next.js는 자동 코드 분할, TypeScript 지원 등과 같은 기능을 제공하여 개발 생산성을 높입니다.
또한, Next.js는 Vercel과 같은 클라우드 플랫폼에서 쉽게 배포할 수 있습니다.
이러한 이유로 Next.js는 React에 비해 더 많은 기능을 제공하며, SSR 및 SSG와 같은 기능은 프로젝트의 성능과 사용성을 크게 개선하는 데 도움이 됩니다.
Next.js 시작하기
Next.js 개발 환경 설정
Next.js를 사용하려면 Node.js와 npm (Node Package Manager)이 설치되어 있어야 합니다. 또한, 적절한 텍스트 에디터와 웹 브라우저도 필요합니다.
Node.js 설치
Node.js는 공식 웹 사이트에서 다운로드하여 설치할 수 있습니다. 버전 12 이상의 Node.js를 사용하는 것을 권장합니다.
npm 설치
npm은 Node.js와 함께 설치됩니다. npm은 JavaScript 라이브러리와 프레임워크를 설치하고 관리하는 데 사용됩니다.
npm을 업그레이드하려면 다음 명령어를 사용할 수 있습니다:
npm install npm@latest -g
텍스트 에디터
Next.js를 개발하기 위해서는 적절한 텍스트 에디터가 필요합니다. 가장 많이 사용되는 텍스트 에디터는 Visual Studio Code, Sublime Text, Atom, WebStorm 등이 있습니다. (저는 비쥬얼 스튜디오 코드를 씁니다)
웹 브라우저
Next.js는 웹 브라우저에서 실행되는 프레임워크이므로, 프로젝트를 실행하려면 적절한 웹 브라우저가 필요합니다. 가장 많이 사용되는 웹 브라우저는 Google Chrome, Mozilla Firefox, Safari 등이 있습니다.
Next.js 설치
Next.js를 설치하려면 터미널에서 다음 명령어를 입력합니다:
npx create-next-app [프로젝트 이름]
위 명령어를 실행하면 Next.js 프로젝트를 생성할 수 있습니다. 프로젝트 이름을 제공하지 않으면 "my-app"이라는 이름으로 프로젝트가 생성됩니다. 이 명령어는 Next.js 프로젝트를 생성하고 필요한 종속성을 자동으로 설치합니다.
프로젝트 실행
프로젝트를 실행하려면 터미널에서 프로젝트 디렉토리로 이동한 후 다음 명령어를 입력합니다:
npm run dev
위 명령어를 실행하면 Next.js 개발 서버가 시작되며, 브라우저에서
주소로 접속하여 개발 중인 프로젝트를 확인할 수 있습니다.
이제 Next.js 개발 환경을 설정했으므로 프로젝트를 만들고 실행할 수 있습니다.
� 공식 Document를 보고 천천히 따라하셔도 됩니다.
새로운 Next.js 프로젝트 생성
새로운 Next.js 프로젝트를 생성하는 방법에는 여러 가지가 있습니다. 이 가이드에서는
create-next-app
을 사용하는 방법을 설명하겠습니다.
1. create-next-app 설치
먼저, 터미널에서 다음 명령어를 입력하여 create-next-app 을 설치합니다:
npx create-next-app
위 명령어는 create-next-app을 실행하고 새로운 Next.js 프로젝트를 생성할 수 있게 해 줍니다.
2. 프로젝트 생성
create-next-app을 실행한 후, 새로운 프로젝트를 생성할 수 있는 몇 가지 옵션이 나타납니다. 옵션을 선택하거나 기본값으로 진행할 수 있습니다.
옵션 중에서 yarn을 사용하고 싶다면 다음과 같이 입력합니다:
npx create-next-app --use-npm my-app
위 명령어는 yarn 대신 npm을 사용하여 my-app이라는 이름의 새로운 Next.js 프로젝트를 생성합니다.
3. 프로젝트 실행
프로젝트를 생성한 후, 다음 명령어를 입력하여 개발 서버를 실행합니다:
cd my-app
npm run dev
위 명령어는 my-app 디렉토리로 이동한 후, npm run dev 명령어를 사용하여 개발 서버를 시작합니다.
개발 서버가 시작되면, 브라우저에서 http://localhost:3000 주소로 접속하여 새로운 Next.js 프로젝트를 확인할 수 있습니다.
이제 새로운 Next.js 프로젝트를 생성하고 실행할 수 있습니다. 필요에 따라 프로젝트를 커스터마이징하고 개발해 나갈 수 있습니다.
Next.js 프로젝트의 파일 구조 이해
Next.js는 React를 기반으로 한 프레임워크로, React 프로젝트와 매우 유사한 구조를 가지고 있습니다. 하지만 일부 차이점이 있습니다.
Next.js 프로젝트는 일반적으로 다음과 같은 구조를 가집니다:
이 구조는 다음과 같은 요소들로 구성됩니다:
.next/: Next.js가 빌드한 결과물이 저장되는 디렉토리입니다.
components/: React 컴포넌트들이 저장되는 디렉토리입니다. 이 디렉토리는 앱에서 사용될 컴포넌트를 만들고 저장하는 데 사용됩니다.
pages/: Next.js에서는 페이지가 중요한 개념입니다. pages/ 디렉토리에는 애플리케이션의 각 페이지에 해당하는 파일들이 저장됩니다. 파일 이름은 해당 페이지의 URL 경로와 일치해야 합니다. 예를 들어 pages/about.js 파일은 /about 경로에서 렌더링됩니다.
public/: 정적 파일이 저장되는 디렉토리입니다. Next.js에서는 이 디렉토리의 파일들을 서버로 전송하지 않고, 클라이언트 측에서 직접 접근할 수 있습니다.
styles/: 스타일 파일이 저장되는 디렉토리입니다. Next.js에서는 CSS, Sass 및 CSS-in-JS 스타일링 방식을 모두 지원합니다.
node_modules/: NPM 패키지들이 저장되는 디렉토리입니다.
package.json: 프로젝트 정보와 의존성들이 정의되어 있는 파일입니다.
package-lock.json: 의존성들의 정확한 버전 정보가 저장되어 있는 파일입니다.
README.md: 프로젝트의 설명이나 문서가 저장되어 있는 파일입니다.
이러한 구조를 이해하면, Next.js 프로젝트에서 필요한 파일을 쉽게 찾을 수 있습니다. 이제 프로젝트를 시작하고 필요한 컴포넌트와 페이지들을 만들어 나갈 수 있습니다.
다음 포스팅에서는 Pages와 Routing에 대해서 알아보도록 하겠습니다. (Pages, 다이내믹 라우팅, Linking between pages in Next.js)
https://brunch.co.kr/@jennyjang93/33
