#03 Next.js (Pages Router) + TypeScript : getServerSideProps, getStaticProps, getStaticPaths

1. SSR : getServerSideProps 함수 - Server에서만 실행 / 브라우저에서 실행 x (콘솔에서 확인 x) - runtime에서만 실행 - context 객체를 통해 쉽게 query에 접근 가능 - Context 객체를 통해, 클라이언트 부분에서는 useRouter()를 사용해서 접근하기 - Post Page에서는 next router를 통해 URL Query 파라미터에 접근 가능 - getServerSideProps의 반환 값은 Post page의 props로 전달 // pages/ssr/[id].tsx import { GetServerSideProps } from 'next'; import { useRouter } from 'next/router'; import React fro..

• format_list_bulleted Next.js
• · 2024. 2. 22.
• textsms

#02 Next.js (Pages Router) : 설치, 라우터, api폴더

* 중첩 라우터 * 다이나믹 라우터 * 페이지 이동 ( Link & router ) * api 폴더 (외부API 주소 은닉) 1. Node 설치 (설치 확인) node -v 2. create-next-app 설치 npx create-next-app pages-route . > npx (node로 만들어진 프로그램을 설치없이 실행 하는 프로그램) > . : 현재폴더 3. package.json > 개발 : yarn dev > 배포 : yarn build + yarn start 4. index.tsx파일 5. pages폴더 > 안에 폴더 만들면 라우터 안에 폴더 = 중첩 라우터 6. pages폴더 > posts 폴더 > 안에 [postId].tsx 파일 생성 = 다이나믹 라우터 * useRouter 사용하기..

• format_list_bulleted Next.js
• · 2024. 2. 22.
• textsms

#01 Next.js (Pages Router) 개념, 렌더링 방식 4가지

1. 넥스트 장점 > SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원 > 파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현 가능 (react-router-dom 설치 x) > 복잡한 Server 구축 없이도 API를 배포 > 최적화 (lazy loading / 코드 split / 이미지 최적화 / 웹폰트 최적화) => 자동으로 지원 > 웹팩이나 바벨 신경 x > 개발자 리액트에만 집중할 수 있게 도와주는 프레임워 [둘 다 배워야함] 넥스트 13 : App Router => 아직은 불안정한 이슈도 있음 넥스트 13 이전 : Pages Router => 6년간 많이 사용되고 있음 [MPA에서 SSR까..

• format_list_bulleted Next.js
• · 2024. 2. 21.
• textsms

next.js : 서버 컴포넌트에서 클라이언트 컴포넌트 분리

update하기 위해서는 해당 id를 알아야함 => useParams 를 사용해야함 (client 컴포넌트 훅임) --> 서버 컴포넌트에서는 사용 불가능 => 클라이언트 컴포넌트로 변경할 수 있지만, 그렇게 되면 서버 컴포넌트의 장점을 잃어버림 (가능한 서버 컴포넌트 위주로 사용하기!) ==> 특정 부분만 클라이언트 컴포넌트화 시키기! [layout.js] (변경 전) Create Update (변경 후) function Control() { return ( Create Update ); } export default async function RootLayout({ children }) { {children} ▶ 컴포넌트화 시키기 [layout.js] import { Control } from './C..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms

Next.js : 데이터 조회 (서버 컴포넌트) & 새글 작성( 클라이언트 컴포넌트) + 캐시

1. 읽기 (READ) : 서버 컴포넌트 read 폴더 > [id] 폴더 > [page.js] (1) 여기는 데이터를 읽어서 출력할 뿐! 사용자와 상호 작용 x => server 컴포넌트 이용! (2) 데이터를 가져올 때는 async + await로 변경 export default async function Read(props) { const response = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await response.json(); return ( Read {topic.body} ); } 2. 오류 해결 (.next 파일 삭제 후 재실행) ▶ 해결 (1) dev 서버 재실행 : npm run de..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms

Next.js : backend (Json-server) | Server Component

html css 이 부분은 현재 하드코딩 됨 => 백엔드에서 저장된 데이터를 가져와서 동적으로 표시할 것 1. JSON-SERVER 로 구축 (1) 터미널 npx json-server --port 9999 --watch db.json >> db.json을 바라보고 있어서 데이터 변경될때마다 다시 재시동 (포트는 9999) (2) http://localhost:9999/topics 로 접속해서 확인 + 개발자 도구 들어가서 esc 클릭 => 하단 콘솔 등장 fetch('http://localhost:9999/topics') .then((response)=>{return response.json()}) .then((result)=>{console.log('result',result)}) fetch().the..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms