[Next.js] 리액트의 프레임워크 Next.js를 알아보자.

 

 

Next.js를 사용하는 이유

SEO(Search Engine Optimization)와 SSR이 가장 크다.

리액트 단독 사용의 경우 화면이 나중에 구성되기 때문에,

최초의 페이지는 빈 화면이기 때문. (CSR)

 

참조 : CSR과 SSR

https://aboveimagine.tistory.com/114

비전공자 관점에서 보는 MPA, SPA, CSR, SSR

 

 

 

설치

npx create-next-app nextjs-blog
// or - typescript
npx create-next-app@latest --ts
// or 
yarn create next-app --typescript
// or
npm create next-app -- --ts

 

페이지 라우팅

"pages" 디렉토리 아래에 js 파일을 생성하기만 하면 파일명이 URL 경로가 된다.

= 직관적인 라우팅이 가능

 

공식문서

아래에 참조한 next js 공식 홈페이지에 튜토리얼이 굉장히 잘 되어있다.

한 번 따라해보면 빠른 이해가 가능하다!

 

 

 

참고: 

https://nextjs.org/learn/foundations/about-nextjs

Learn | Next.js

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

[Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?

https://defineall.tistory.com/1037

[Next.js] Next.js란? / 간단시작하기 ( feat. <Link> )