거북이개발자

1. 결과 2. 동적 라우터 next는 위와 같이 각각의 페이지를 일일이 만드는 것이 아닌 id값으로 동적 라우터가 가능하다. 3. 내비게이션 위의 내비게이션 구현은 import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = useRouter(); let activeItem; if (router.pathname === "/") { activeItem = "home"; } else if (router.pathname === "/about") { activeItem = "about"; } else if (router.pathname ==..

0. 배경 위와 같은 제품 상세페이지를 만들려고 한다. 1. SSR적용 안할시 import axios from 'axios'; import Head from 'next/head'; import { useRouter } from 'next/router' import { useEffect, useState } from 'react'; import { Loader } from 'semantic-ui-react'; import Item from '../../src/component/Item'; const Post = () => { const router = useRouter(); const { id } = router.query; const [item, setItem] = useState({}); const [..

1. Next는 모든 페이지를 사전 렌더링 한다.(Pre-rendering) -더 좋은 퍼포먼스 -검색엔친최적화(SEO) -html 생성 순서에 따라 정적 생성과 Server Side Rendering으로 나뉜다. 2. 정적 생성 -프로젝트가 빌드하는 시점에 html 파일들이 생성 -모든 요청에 재사용 -퍼포먼스 이유로, 넥스트는 정적 생성을 권고 -정적 생성도니 페이지들은 CDN에 캐시 -getStaticProps / getStaticPaths -유저가 요청하기 전 페이지를 만들어 놔도 상관없을 시 사용 3. 서버사이드 렌더링 -매 요청마다 html생성 -항상 최신 상태 유지 -getServerSideProps