1. a 태그 기본적인 페이지 이동을 위해서 사용하는 태그인 a 태그를 Next.js에서 사용할 수 있다. const NavBar = () => { return ( Home About ); }; export default NavBar; 페이지 이동은 정상적으로 가능하다. 하지만, React는 SPA, Single Page Application을 채택하였는데, a태그를 사용하면 페이지 이동 시 새로고침을 하게된다. 이러한 문제를 해결해서 라우팅을 하기 위해서 Next.js에는 제공하는 기능이 있다. 2. Link 태그 import Link from "next/link"; const NavBar = () => { return ( Home About ); }; export default NavBar; Link..

1. npx를 사용해서 프로젝트 생성 npx create-next-app@latest --typescript 프로젝트명 @latest 옵션을 추가하면 최신 버전의 Next.js를 설치할 수 있다. 만약 typescript를 함께 사용할 계획이라면 --typescript 옵션을 통해서 같이 사용할 수 있다. ( 필수는 아님 ) 2. pages Next.js를 사용하면 프로젝트에 Page를 추가하는 작업은 매우 쉬워진다. React 컴포넌트를 export 하고 있는 파일을 pages 폴더 안에 넣어두기만 하면 된다. 그러면 Next.js가 자동으로 파일의 이름을 가져가서 url의 경로로 사용한다. 만약 React를 사용할 경우에는 router를 만들고, routes를 설계한 다음에 랜더링 하는 작업을 해야 ..

1. Next.js? Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다. 따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다. 2. 사용하는 이유 1. SSR Next.js를 사용하는 가장 큰 이유로 SSR이 있다. React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우 전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다. SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다. CSR은 Client Side Rendering이고 작동 순서는 서버에서 브라우저로 응답을 보낸다. 브라우저에서 JS를 다운로드한다...