"use client"; import { useRouter } from "next/navigation"; export default function Create() { const router = useRouter(); return ( { e.preventDefault(); const title = (e.target as HTMLFormElement).elements.title.value; const body = (e.target as HTMLFormElement).elements.body.value; const options = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title, b..

넥스트js의 핵심 키워드는 프리 렌더링 서버에서 미리 리액트 컴포넌트를 HTML로 바꾸어 클라이언트로 보내준다. 이 것을 받은 클라이언트는 react.js가 되고 리액트 환경에서 작동한다. 비로소 리액트와 연결되면 동적인 페이지 이용이 가능하다. 이 프로세스가 Hydration 이다. 1. 링크를 걸때는 리액트와 똑같이 Link를 쓰지만 to 가 아니라 href를 쓴다. useRouter 빌트인 훅을 사용하면 라우팅 정보가 나온다. 2. module css 시스템을 쓴다. 리액트에서는 {`${style.~~~}`}로 쓰는데 여기도 똑같다. 근데 모듈화는 좀 불편하다. 3. styled jsx 방식이 있다. 모듈처럼 클래스명이 충돌하지 않는다. 4. 전역으로 스타일 설정할 때는 jsx global을 통해서..