React13 [Next.js] Route System - 3) next/route useRouter useRouter() react-router-dom dml useNavigation 기능을 Next.js 에서 next/route useRouter()로 구현할 수 있다. import { useRouter } from 'next/router'; export default function Home() { const router = useRouter(); console.log(router); // ... } pathname: string: 현재 경로로 페이지 경로 이면, basePath 또는 locale 은 포함되지 않는다. query: object: 동적 라우트 매개변수를 포함하는 객체로 구문 분석된 쿼리 문자열 asPath: string: basePath또는 locale 없이 브라우저에 표시되는 경우(q.. 2023. 12. 5. [Next.js] Route System - 2) next/link - Link Link Next.js 에서도 react-router-dom 처럼 next/link 의 link 를 사용할 수 있다. import Link from 'next/link' function Home() { return ( Home About Us Blog Post ) } export default Home Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boolean - scroll scroll={false} Boolean - prefetch prefetch={false} Boolean - 태그의 속성인 className 이나 target="_blank" 와 같은 것들이 속성으.. 2023. 12. 5. [Next.js] Route System - 1) pages, app 라우팅 Next.js 에서는 react-router-dom 과 같이 개발자가 직접 라우팅 설정을 하지 않아도 된다. 대신에 hook과 파일 컨벤션을 통해 라우팅을 지원하고 있다. 또한 Next.js는 v13 부터 app 라우팅을 지원하는데 이전에 pages 라우팅 부터 먼저 살펴보자. Next.js pages routing src/pages ├── _app.tsx ├── index.tsx ├── naver.tsx ├── preview.tsx ├── profile │ ├── [name].tsx │ └── index.tsx │ └── phone.tsx └── setting ├── auto-complete.tsx ├── [...search].tsx └── site.tsx Next.js 는 /pages or /src/.. 2023. 12. 5. [Next.js] Server Components 서버컴포넌트를 이용하여 data fetching 방식을 사용할 때의 장점 1. 클라이언트 단에서 돌아가지 않는 데이터베이스 및 api 등의 백엔드 서비스에 접근이 가능하다. 2. 보안 상 노출되면 안되는 키값들을 클라이언트 단에 드러나지 않게 할 수 있다. 3. data fetching 과 렌더링을 동일한 환경에서 수행할 수 있다. 4. 서버에 렌더링 캐싱이 가능하다. 5. 번들링할 자바스크립트 양이 줄어든다. 일반적으로 리액트에선 모든 작업이 클라이언트 단에서 이루어진다. Next.js 는 이러한 컴포넌트들을 서버에서 부분적으로 렌더링되는 페이지로 만들어서 클라이언트에서 모든 것을 부담하지 않아도 되게 개선하였다. 하지만 이 방식은 이렇게 서버단에서 생성된 HTML에 결국 클라이언트 단에서 hydrat.. 2023. 12. 4. 이전 1 2 3 4 다음
