Next.js 기초 공부

안녕하세요 홍가 입니다.

오늘은 Next.js에 대해서 알아보려고 합니다.

 

Next.js란

리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임 워크입니다.

리액트에는 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)등 다양한 기능을 제공해줍니다.

 

우선 저는 포트폴리오를 Next.js로 만들었습니다.

Next.js는 파일명을 함수와 다르게 지어도 인식이 됩니다.

css도 파일 css, module.css, styled.css, global.css 여러가지로 사용이 가능합니다.

 

저는 첫 화면이 너무 마음에 들었습니다.

Next.js 파일을 생성 후 나오는 첫 페이지인데 깔끔하니 좋습니다.

 

넥스트의 장점 중 하나는 페이지 이동시 파일이 없으면 404 Err 페이지를 만들어줍니다.

 

넥스트는 리액트와다르게 이동을 간편하게 할 수 있습니다.

리액트는 react-dom-router로 페이지 이동을 시키지만

 

넥스트는 router.push 및 Link로 페이지 이동을 시켜주어 간편하게 이동이 됩니다. 

리액트는 js코드를 가져오고 그래서 로딩이 느리며 ui가 나중에 보입니다. 클라이언트 사이드 렌더링 (CSR)

 

넥스트는 HTML이 보여지며 SEO에 이득이 된다.