[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 작업하는 방법을 알아보도록 하겠습니다.
참고자료
마지막
해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.
'공유 > React, Next' 카테고리의 다른 글
| [NextJS] 동적 routing 작업하기 (0) | 2022.03.28 |
|---|---|
| [NextJS] routing, 공통 layout 작업 (0) | 2022.03.25 |
| [React] useCallback, useMemo 잘 쓰기 (0) | 2022.03.11 |
| [React] input onChange 함수 확장성 있게 사용하기 (0) | 2022.01.15 |
| [React] react에서 className 여러 개 사용하는 방법 (0) | 2021.12.15 |
