📂 NEXT는 풀스택 프레임워크이다.
📦 라이브러리(React.js)
사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 (내가 집주인)
📦 프레임워크(Next.js)
파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 (내가 집에 초대된 손님)
✓ 통제의 역전
라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전).
(라이브러리)에서 메서드를 호출하면 사용자가 제어할 수 있다.
그러나 (프레임워크)에서는 제어가 역전되어 프레임워크가 사용자를 호출한다.
📂 PAGES 폴더
✓ 해당 폴더안에 파일을 생성하면, 파일명을 URL로 사용한다.
(ex. about.js -> /about)
✓ index.js는 프로젝트 시작(루트) 페이지다. /
✓ React에서 React router DOM으로 설정했던 것을 생각한다면
Next는 React 대비 굉장히 편리하다.
✓ 파일 안에 컴포넌트 이름은 영향을 주지 않는다.
단, 항상 컴포넌트는 export default 이어야 한다. (사진 참고)
📂 프리 렌더링(Pre Rendering)
📦 React는 client-side rendering 이다.
클라이언트-사이드 렌더링(client-side rendering)은
✓ 브라우저에서 자바스크립트가 활성화되지 않으면 볼 수 없다.
✓ 브라우저가 사이트에 접속했을 때, 비어있는 div를 가져오고
자바스크립트와 리액트를 실행시키고, 그 이후에 유저에게 보여진다.
✓ 따라서 인터넷 환경이 좋지 못하면,
유저에게 흰 화면이 오랫동안 보이는 경우가 생길 수 있다.
✓ 클라이언트-사이드 렌더링(React)으로 만들어진 사이트
예시 사이트 접속 - 오른쪽 마우스 클릭 - 페이지 소스 보기
예시 사이트: https://wannabeing.github.io/c-flix/#/
📦 Next는 pre-side rendering 이다.
프리-사이드 렌더링(pre-side rendering)은
✓ 브라우저에서 자바스크립트가 비활성화되어 있을지라도 HTML은 보여진다.
✓ 브라우저가 사이트에 접속했을 때, Next.js에 의해
HTML이 미리 렌더링되고, 그 이후에 리액트와 연결되어 사이트가 렌더링된다.
이 때, 미리 생성된 HTML에 자바스크립트 코드들이 각자의 자리를 찾아
렌더링되는 과정을 hydrate(수화)라고 표현한다.
NEXT hydrate
✓ 따라서 인터넷 환경이 좋지 못하더라도
유저에게 보여질 HTML(초기상태)라도 보여지게 된다.
✓ SEO에도 좋다. SEO란?
✓ 프리-사이드 렌더링(Next)으로 만들어진 사이트
예시 사이트 접속 - 오른쪽 마우스 클릭 - 페이지 소스 보기
예시 사이트: https://www.netflix.com
📂 Link 네비게이팅
✓ Next에서는 a태그를 네비게이팅하는데에 사용하면 안된다.
네비게이팅하는데 사용되는 특정 컴포넌트가 존재하기 때문이다.
✓ 리액트에서 React Router Link를 사용해야 하는 이유와 같다.
[React] React Router란
[React] a 태그와 Link 의 차이점
✓ 사용예시
import Link from "next/link";
export default function NavBar(){
return (
<Link href="/">
<a>Home</a>
</Link>
<Link href="/about">
<a>About</a>
</Link>
)
}📂 STYLE 적용
📦 CSS Modules
✓ Next에서 CSS를 설정하는 많은 방법 중 하나이다.
✓ 장점: 모듈마다 클래스이름이 같아도 랜덤한 이름을 가지므로 충돌 가능성이 없다.
✓ 단점: 모듈파일마다 해당 클래스이름을 알고 있어야 한다.
또한 클래스마다 조건이 생길 경우, 클래스이름이 길어진다.
✓ 사용방법: Next CSS Modules 사용
📦 STYLED-JSX
✓ Next가 권장하는 방법이다.
✓ Next에서 CSS를 설정하는 많은 방법 중 하나이다.
✓ 컴포넌트 내에서만 적용되는 스타일을 제공한다.
✓ 파일 하나로 작성되기 때문에 코드가 길어진다는 단점도 있다.
✓ 사용방법: Next CSS styeld-jsx 사용
📂 Custom App (./pages/_app.js)
✓ 모든 페이지(컴포넌트)들의 청사진/부모 이다.
✓ 글로벌 스타일을 적용시킬 때도 사용한다.
✓ 모든 style파일은 해당 파일을 통해 임포트 시켜야한다.
✓ 글로벌 스타일 및 사용예시
위치: ./pages/_app.js
파일명: _app.js
// Componenet: 렌더링되는 컴포넌트명
// pageProps: 상속되는 props
export default function App({Componenet, pageProps}){
return (
<div>
<Componenet {...pageProps} />
<span>Hello</span>
</div>
<style jsx global>{`
a {
color: red;
}
`}</style>
)
}모든 페이지 하단에 <span>Hello</span>가 포함된다.
모든 페이지의 a태그 색상이 red 이다.
📂 Layout 패턴
📦 프로젝트 구조
📂 NEXT_PROJECT
┣ 📂 components
┃┣ 📜 Layout.js
┃┣ 📜 NavBar.js
┃┗ 📜 Seo.js
┣ 📂 pages
┃┣ 📜 _app.js
┃┣ 📜 about.js
┃┗ 📜 index.js
✓ 컴포넌트를 분리하여 _app.js 파일을 가볍게 한다.
📂 NEXT.CONFIG.JS (파일)
📦 redirects()
✓ source: 사용자가 요청한 URL
✓ destination: 리다이렉트 되는 URL (사용자도 알 수 있음)
✓ permanent: true(308 status code), false(307 status code)
✓ 사용예시 (next.config.js)
module.exports = {
reactStrictMode: true,
async redirects() {
return [
{
source: "/about",
destination: "/form",
permanent: false,
},
];
},
};✓ 요쳥한 URL이/about 일 때, /form으로 리다이렉트 된다.
📦 rewrites()
✓ source: 사용자가 요청한 URL
✓ destination: 리다이렉트 되는 URL (사용자는 알 수 없음)
✓ permanent: true(308 status code), false(307 status code)
✓ redirects와 같지만 사용자는 리다이렉트 되는 URL을 알 수가 없다.
✓ API 관련 데이터를 숨길 수 있다는 장점이 있다.
✓ 사용예시 (next.config.js)
module.exports = {
reactStrictMode: true,
async rewrites() {
return [
{
source: "/api/movies",
destination: "API 관련 호출"
},
];
},
};✓ 소스코드에서 /api/movies를 fetch하면 API DATA 를 가져올 수 있다.
✓ rewrites() 사용 전 (아래 사진참고)
Request URL(API 호출)을 자세히 보면 API_KEY가 그대로 보여지게 된다.
하지만 rewrites()를 통해 API를 호출하면 아래사진과 같이 마스킹된다.
📂 SSR (server-side-rendering)
✓ 사용자에게 표시될 페이지를 미리 서버에서 구성하는 방식 SSR이란?
✓ [1] SSR vs CSR
✓ [2] SSR vs CSR
✓ SEO가 필요한 페이지에 사용할 수 있다. SEO란?
📜 index.js
export default function Home({ results }){...}
// SSR
export async function getServerSideProps() {
// API 가져오기
const { results } = await (
await fetch("http://localhost:3000/api/movies")
).json();
return {
props: {
results,
},
};
}
📜 getServerSideProps()
✓ 백엔드(서버)에서만 실행되는 함수
✓ 객체를 반환한다. 반환한 객체는 해당 컴포넌트에서 상속하여 사용할 수 있다.
✓ 반환된 객체는 서버에서 사용되고, 브라우저에서 다시 사용된다.
📜 index.js의 첫번째 줄의 results 객체 확인
💬 언제 getServerSideProps를 사용해야 할까?
request time에 반드시 데이터를 fetch해와야 하는 페이지를 pre-render해야 하는 경우에만 getServerSideProps를 사용해야 합니다.
데이터를 pre-render할 필요가 없다면 client side에서 데이터를 가져오는 것을 고려해야 합니다.
💬 getServerSideProps가 오류 페이지를 렌더링하나요?
getServerSideProps 내부에서 오류가 발생하면 pages/500.js 파일이 표시됩니다.
500 page(서버 렌더링 오류 페이지)는 사용자가 커스터 마이징 할 수 있습니다.
개발 중에는 이 파일이 사용되지 않고 대신 개발 오버레이가 표시됩니다.
💬 CSR이 적합한 경우가 있을까요?
사용자 대시보드 페이지에 적합합니다.
왜냐하면 대시보드는 사용자별 비공개 페이지이기 때문에 SEO와는 관련이 없으며 페이지를 미리 렌더링할 필요가 없습니다.
또한 데이터는 자주 업데이트되므로 요청 시 데이터를 가져와야 합니다.
📂 Dynamic Routes
📦 PAGES 폴더 구조
📂 pages
┣ 📂 movies
┃ ┗ 📜 [id].js
┣ 📜 _app.js
┗ 📜 index.js
📜 ./pages/movies/[id].js
import { useRouter } from "next/router";
export default function Detail() {
const router = useRouter();
const id = router.query.id
return "detail";
}
✓ Dynamic Routes은 대괄호[param].js 으로 생성한다.
✓ [name].js 이였을 경우, router.query.name 으로 받는다.
✓ [...param].js는 모든 경로를 저장한다. [...param].js 사용하기
