Nextjs 정리

https://nextjs.org/docs

 

Next.js는 풀스택 웹 어플리케이션을 만들기 위한 프레임워크입니다. 리액트에서 서버사이드 렌더링과 SEO 최적화를 위해 사용된다. 파일 시스템 기반의 라우팅, 렌더링 최적화 등을 지원하고 있다.

 

Next.js를 사용할 때 주로 백엔드 서버를 따로 둬서 개발하는 것이 일반적인 것 같다.

Client -> Next(프론트서버) -> Nest(백엔드서버) -- 일반적인 사례

Client -> Next(백엔드)

 

Next.js의 pages 폴더를 통해 라우팅을 설정할 수 있다.

/ → pages/index.js

/about → pages/about.js

/blog/hello-world → pages/blog/[slug].js

 

리액트 코드 내에서는 Link 컴포넌트를 통해 연결하거나 useRouter를 사용한다.

<Link href="/">Home</Link>

 

const router = useRouter();

router.push("/about");

 

Next.js는 API를 통해 가져온 데이터를 생성한 페이지에 넣고 클라이언트에 보내는 식으로 동작한다. (SSR) 리액트와 Next.js를 같이 사용하는 순간부터 사실상 서버의 역할을 담당하는 것이다. 다만 라우팅 부분을 제외하고 리액트 사용에 큰 차이는 없는 것으로 보인다.