본문 바로가기
반응형

React/Next.js8

[Next.js] 파일 기반 라우팅 Next.js 파일기반 라우팅 방법 알아보기 React는 react-router를 사용해서 아래와 같은 형식으로 직접 지정을 해주는 반면에 Next.js는 file을 기반으로 한 라우팅을 사용 할 수 있어 처음 index에서는 우리가 react를 사용할 때 path="/" 해당하는 부분 path="/about"으로 나타내던 부분은 폴더이름 about의 index로 나누어 주면 된다. 저러한 형식으로 만든 파일을 실행하면 서로 라우팅 구조는 다르지만 /about의 주소가 할당되어 페이지가 나타나게 된다. 또한 위의 그림과 같이 [projectid]를 해준 부분은 [projectid]에 해당하는 값을 콘솔에서 찾으려면 router.query를 실행하여 아래와 같이 결과 값이 나온다. console.log(r.. 2022. 1. 7.
[Next.js] Next.js 란? 🎈 Next.js란? Next.js는 React의 SSR(Server-Side-Rendering)을 구현할 수 있게 도와주는 프레임워크로서 여전히 React를 기반으로 하기 때문에 React를 향상시키고 여전히 React코드를 사용한다. Next.js는 페이지의 검색엔진을 위해서 타이틀이나 meta정보를 손쉽게 설정할 수 있는 장점과 렌더링이 빠르다는 장점을 가지고 있다. React자체에서도 SSR을 설계할 수 있지만 Next.js를 사용하면 보다 쉽게 구현이 가능하다. Next는 한번에 렌더링이 되기 때문에 처음 로딩속도는 빠르지만 page 이동시에는 CSR(Client Side Rendering)이 더 빠르다. 기 이유는 CSR은 처음 로딩할 때 모든 파일을 내려받아 페이지를 이동할 때 해당페이지에서.. 2021. 12. 22.