목차

1. Next.js란 무엇인가?

2. Next.js가 제공하는 주 기능

3. Next.js를 통해 작업할 프로젝트

1. Next.js란 무엇인가?

1-1. 정의 : React로 만들어진 서버 사이드 렌더링(SSR) 프레임 워크

• 왜 서버 사이드 렌더링이 중요할까?

1-2. SSR이란 : 서버측에서 브라우저에서 사용될 화면(view)를 제공해주는 것

• 기존의 CSR의 경우, 서버에서 받은 데이터를 토대로 브라우저가 화면(view)을 제공함
• 즉, 서버에서는 빈 html을 제공하고, 브라우저는 그에 대한 내용을 렌더링 해야하기에, 로딩 속도가 느려질 수 밖에 없음
• 또한 별도의 SEO(검색엔진 최적화)작업이 필요함 => 포털 사이트에서 웹사이트에 대한 데이터를 제대로 수집하는데 한계가 있다는 것을 의미
• 이를 해결하기 위해, SSR을 이용 => 서버가 자바스크립트까지 완성된 html문서파일을 제공하여 로딩 속도가 향상 + 검색엔진최적화 가능
• 이게 Next.js의 유일한 장점인가?

1-3. 풀스택 기반의 프레임 워크

• Next.js는 API 기능과 서버 컴퍼넌트를 통한 서버측 기능 + React 컴퍼넌트를 사용한 클라이언트 기능을 동시에 수행가능
• 덕분에, 프론트 엔드에서도 백엔드의 역할을 수행할 수 있다는 장점이 있음

2. Next.js가 제공하는 특이점

2-1. pre-rendering

• SSR의 최대 장점으로, 미리 데이터가 렌더링된 html 페이지를 가져올 수 있으므로, UX개선에 큰 기여를 하며, 정적 사이트 생성(SSG)도 가능해진다.

2-2. dynamic route ([])

• []문법을 사용하여, 동적인 url 작성이 가능
• pages/[값].tsx 면 {router.query.값}으로 편하게 사용가능

2-3. code spliting(코드 분할)

• 페이지를 렌더링 할 때, 방대한 javascript paylod(전송 데이터)를 보내는 것이 아닌 dynamic import을 통해 필요한 부분만 import하여 자바스크립트 로딩 시간이 개선됨

3. Next.js를 통해 작업할 프로젝트

• 프로젝트 명 : 고민을 먹는 고래
• 프로젝트 정의: 각자의 고민들을 작성하면, 이를 깔끔하게 지워주는 효과를 구현하여 잠시나마 고민을 잊게 만들어주는 페이지

참고 문헌
1.youngDev 블로그 : https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80
2. kyounghwan01 블로그 : https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80