TEST

test

Jul 25, 2023

🔍

React frontend development framework created by Vercel that enables functionality such as SSR, SSG

built on top of React(CSR based)

→ SSR: better SEO & performance

→ SSR의 장점 + CSR의 장점(Quick, Dynamic client-side routing.. etc)

다른 장점?

쉬운 페이지 라우팅(react-router-dom bye): pages 폴더에 넣으면 파일명으로 라우팅됨

API Routes → 마찬가지로 파일 구조로 구현

TypeScript & Sass

SSG(next export)

Easy Deployment(vercel, github pages, .. 주로 연습할 때..ㅎㅋ)

create-next-app

stylesheet convention

global css는 개별 컴포넌트에 따로 임포트 불가

<Component Name>.module.css로 하셈(.module.css만 있으면 됨)

component/page filename convention

pages에는 소문자

component는 대문자

/pages/_document

: 페이지 내 html 태그 자체, body를 건드리고 싶을 때

→ 서버에서 만들어져 나오는 거라 인터랙션 있는 건 불가

https://nextjs.org/docs/advanced-features/custom-document

<html lang="en"> —> 일케 넣는거제

3가지 methods to get data from server

getStaticProps: 컴포넌트 파일 내에서 함께 export 해두면 렌더 전에 끌어와서 props에 넣어줌

getServerSideProps: 데이터 소스가 가변적인(ex. 게시글 정보 가져오기.. 글 id에 따라 소스 달라짐) fetching

getStaticPath:

nested routing

:만약 url이 /post/:id라면

:폴더 구조를 pages/post/[id]/index.js 이렇게 가져가면 the end.

: param 찾는 법


import {useRouter} from 'next/router';

const router = userRouter();
const {id} = router.query;

// getServerSideProps, .. -> 인수로 context -> context.id 해서 꺼냄

getStaticPaths()

: dynamically generate paths (e.g. /posts/:id)

/api 폴더에서 /posts/[id].js 이런 곳에 api를 정의할 수 있다.