코딩애플 Next.js, 개발 환경 세팅하기

일단 CSR 부터

Client Side Rendering

웹 페이지를 클라이언트(사용자의 브라우저)에서 실시간으로 만들어주는 것

웹의 인터렉티브함은 올라가게 되지만 구글 검색 노출이 안좋아지는 단점과 페이지 로딩 속도가 느려지는 단점이

수입성에 악영향을 끼치지면서 CSR 은 지고, SSR 으로 기울고 있는 추세이다.

 

SSR(Server Side Rendering) ?

웹 페이지를 서버딴에서 만든 다음 클라이언트에게 보내주는 것이므로

가볍고 SEO 에 유리함, 원하는 곳에 CSR으로 보내줄 수 있으니 해당 기술을 사용하는 것이 점차 늘어나는 중

 

CSR -> SSR

리액트의 useState 나 Ajax, 비동기, 등등 CSR에서 사용하던 기술들이 SSR에선 별로 필요가 없어지므로

프론트엔드보다 풀스택이나 백엔드 개발자를 기업에선 선호하게 된다고 한다.

 

Next.js

프론트엔드부터 서버까지 만들 수 있는 리액트 기반 프레임워크

SSR 이 쉬워지기에 로딩 시간이 빠르고 검색 엔진 최적화된 사이트를 만들 수 있음

• 쉬워진 문법
• 풀스택 (프엔+백엔) 모두 가능
• CSR 만들기도 쉬워짐
• 최적화가 쉬워짐

유사한 렌더링 프레임워크에는 gatsby, nuxt, sveltekit, remix 등이 존재함.

Nextjs 13

• 폴더 기반 자동 라우팅
• 서버 API 기능
• 쉬운 DB 연결
• 직관적인 렌더링 전략 선택 기능
• hybration 없는 SSR
• 이미지와 폰트 최적화 등

 

Next.js 프로젝트 생성하기

npx create-next-app@latest

해당 명령어를 입력하면 이거저거 설정하는 질문들이 있을 것임

이름 잘 지어주고 타입스크립트 등등 설정은 적당히 해주고 App Router 는 Yes로!

app 폴더 안 page.js 가 메인 페이지가 된다.

실행은 익히 아는 npm run dev 로, localhost:3000 에서 미리 보기가 가능하다.

• app 폴더 : 코드를 짜게될 폴더
• layout.js : 메인 페이지를 감싸는 용도
• public 폴더 : 이미지나 static 파일 보관용
• api 폴더 : 서버 기능 만드는 곳
• next.config.js : nextjs 설정 파일

 

일단은 이렇게 개발 환경을 세팅해주었다.