[Next.js] Next.js 소개

[Next.js] Next.js 소개

Next.js는 React Framework 입니다. Next.js는 CSR인 react를 보다 더 쉽게 SSR이 가능하도록 도와줍니다. SSR이 가능하면 SEO에 더 유리하게 됩니다. 그 뿐만이 아니라 SSR, SSG, CSR 중 내가 원하는 방법으로 렌더링 방식을 정할 수 있습니다. 또한 routing 작업, 404 page 등 보다 더 다양한 기능을 쉽게 사용할 수 있습니다. 해당 카테고리에서는 nextjs에 대해 알아보고 SSR, SSG, CSR을 nextjs로 하는 방법을 알아보겠습니다.

Next.js 개발 환경 셋팅

우선 nextjs 개발 환경을 셋팅해보도록 하겠습니다.

설치 명령어 : npx create-next-app project-name

설치 명령어 (typescript) : npx create-next-app project-name --typescript

위 명령어를 통해 project를 셋팅하면 됩니다. 여기서는 간단하게 알아보기 위함이니 JS로 하겠습니다. 필자는 아래 명령어로 설치하였습니다.

ex) 설치 명령어 : npx create-next-app nextjs-practice

해당 프로젝트를 실행하는 방법은 아래 명령어를 이용하면 됩니다.

실행 명령어 : yarn run dev

위 명령어를 실행하면 개발 사이트가 실행됩니다. 아래 결과 이미지를 확인할 수 있습니다.

위 사이트가 표시되면 이제 개발 준비가 완료되었습니다.

 

이번 게시글에서는 nextjs가 무엇인지, nextjs 개발 환경 셋팅을 하였습니다. 다음 게시글에서는 nextjs에서 간단하게 layout 작업하는 방법을 알아보도록 하겠습니다.

참고자료

• NextJS 공식 홈페이지
• 해당 게시글 코드 확인

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.