Next.js 요즘 대세라던데? 그게 뭐죠

안녕하세요, 요즘은 핫한 웹 프레임워크, Next.js에 대해 알아보려고 합니다!

개발을 해보셨거나 공부해보신 분이라면 한 번쯤 들어보셨을 텐데요, Next.js가 도대체 무엇인지, 어디서 나왔는지, 그리고 왜 인기가 많은지 알려드릴게요! 🎈

 

---

Next.js란? 🤔

Next.js는 React를 기반으로 한 서버 사이드 렌더링(SSR) 프레임워크예요. React는 자바스크립트 라이브러리로, 컴포넌트를 만들어서 웹 애플리케이션을 구축하는 데 사용되는데, Next.js는 이 React를 더 강력하게 만들어주는 도구라고 할 수 있죠.

서버 사이드 렌더링(SSR) ????

SSR이란 사용자가 웹페이지를 요청할 때 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식을 의미합니다. 이 방식은 초기 페이지로 속도를 개선하고 SEO(Search Engine Optimization)에 유리합니다. 클라이언트 측에서는 이미 렌더링된 HTML을 받아보기 때문에 초기 로드시간이 단축되며, 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있습니다.

---

Next.js는 2016년에 Vercel(구 ZEIT)이라는 회사에서 개발했어요. Vercel은 프론트엔드 개발을 위한 다양한 툴과 서비스를 제공하는 회사로, Next.js를 통해 많은 개발자들에게 인지도를 얻게 되었답니다. 😎

간단히 말해서, Next.js는 서버 사이드 렌더링을 아주 쉽게 할 수 있도록 도와주는 프레임워크예요. React만으로도 훌륭한 웹 애플리케이션을 만들 수 있지만, Next.js는 이를 더 강력하고 유연하게 만들어줘요.

---

왜 Next.js를 사용할까? 🤔

1. 서버 사이드 렌더링 (SSR)

기존의 React는 모든 렌더링을 클라이언트 쪽(브라우저)에서 했어요. 하지만 Next.js는 서버에서 먼저 HTML을 생성하고, 브라우저에 보냅니다. 이렇게 하면 SEO(검색 엔진 최적화)에 유리하고, 초기 로딩 속도도 빨라집니다. 🚀

2. 정적 사이트 생성 (SSG)

Next.js를 사용하면 빌드 시점에 정적 HTML 파일을 생성할 수 있어요. 이는 매우 빠른 성능을 제공하고, 배포하기도 쉬워요. 특히 블로그나 문서 사이트처럼 콘텐츠가 자주 변하지 않는 경우에 유용하죠. 📚

3. 파일 기반 라우팅

Next.js에서는 폴더 구조만 잘 만들어 놓으면 라우팅을 자동으로 처리해줘요. 예를 들어, pages/about.js 파일을 만들면 /about 경로로 자동 연결된답니다. 😄

4. API Routes

Next.js는 API 라우트를 지원해서 백엔드 코드도 쉽게 작성할 수 있어요. 이젠 서버리스 함수도 쉽게 만들 수 있답니다! 🎉

5. 빠른 빌드와 최적화

Next.js는 코드 스플리팅과 같은 다양한 최적화 기능을 내장하고 있어서, 빌드 속도가 빠르고, 애플리케이션의 성능을 최대화할 수 있어요.

---

Next.js 시작하기 🚀

Next.js를 시작하는 방법도 아주 간단해요! 다음 명령어를 입력하면 바로 새로운 프로젝트를 생성할 수 있답니다.

npx create-next-app my-next-app

뒤에 my-next-app은 새로운 폴더 이름을 my-next-app으로 만들어서 설치하는 과정이에요. 현재 코드에 설치하고 싶다면 ' . ' 을 입력해주시면 되요!

그리고 프로젝트 폴더로 이동해서 개발 서버를 실행해보세요.

cd my-next-app
npm run dev

이제 브라우저에서 http://localhost:3000을 열어보세요! Next.js가 잘 동작하는지 확인할 수 있을 거예요. 🎈