Next.js Crash Course를 보고 배운내용
Next.js
프론트엔드 + 백엔드 콤비네이션으로 Vercel이라는 회사가 만들었다
정적인 사이트도 가능하고, 서버사이드 렌더링 가능
중간이상의 리액트 프로젝트,
프로덕션 레벨의 앱을 만들면 Next.js로 만들고 싶을거라고 한다
장점
- API Routes
- TypeScript나 Sass 사용하고 싶으면 그냥 확장자만 변경하면 된다
- 디플로이가 쉽다
Vercel, heroku 등으로 쉽게 푸시 - ... 등
라우팅
라우팅 기능이 정말 쉽다
CRA에서 react-router-dom으로 했다면
여기서는 그냥 pages 폴더에 넣으면 끝이다
예를 들어 pages폴더 안에 about.js를 만들어주면
localhost:3000/about.js
이렇게 접속이 가능하다
다이나믹 라우팅은 []를 이용한다
다이나믹 라우팅 예시
<Link href="/article/[id]" as={`/article/${article.id}`}>
<a className={articleStyles.card}>
<h3>{article.title} →</h3>
<p>{article.excerpt}</p>
</a>
</Link>
Next 다큐먼트 - 라우팅
=> https://nextjs.org/docs/routing/introduction
위에서 생성한 동적 링크의 페이지는 pages 폴더에 넣어주면 된다.
즉 article 폴더 안에 [id] 폴더를 넣어주기
링크 태그
<Link> 태그의 큰 다른점은 아니지만
Next.js에서는 <Link> 태그 안에 <a> 태그도 같이 넣어서 작성하기를 원하는 것 같다
사이트 접근성과 그리고 어쩌면 더 좋은 SEO를 위해서도 그렇다고 한다
<Link href="/about">
<a>About</a>
</Link>
Static website
next export를 해주면 out이라는 폴더에 현재 상태의 웹사이트가 만들어진다
뭔가 저장용으로도 사용할 수 있을 것 같다
package.json에 있는 scripts에 추가해서 사용할 수 있다
"scripts": {
//
"build": "next build && next export",
// ... 앞뒤 생략
}
커스텀 Document
기존의 Document를 덮어 쓸 수 있다
방법은 pages 폴더 안에 _document.js를 넣어주면 된다
그리고 이 코드는 Next 공식에서 제공하는 document 코드
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Fetching 데이터 4가지
1. 친숙한 CSR 방법
2. 서버에서 fetch 하는 SSR 방법
3. 빌드시 fetch하고 박제하는 SSG 방법
4. SSG와 SSR을 합친 것처럼 보이는 ISR 방법
우선 Next.js 공식 문서
=> https://nextjs.org/docs/basic-features/data-fetching/overview
하지만 역시 예시를 봐야 이해가 갈 듯 싶다
그래서 찾아본 너무 고마운 리소스들
Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)
=> https://theodorusclarence.com/blog/nextjs-fetch-method
How to choose between Next.js CSR, SSR, SSG, and ISR
=> https://theodorusclarence.com/blog/nextjs-fetch-usecase
Updating Static Next.js Pages Instantly
=> https://joebell.co.uk/blog/updating-static-next-js-pages-instantly
컨셉은 알았지만 아직 빈약하니
몇 번 더 읽고 지금 만드는 프로젝트에 어떻게 사용할 지 생각해보고 바로 적용!
'Web Dev > React :: 리액트' 카테고리의 다른 글
| React :: 리액트 리팩토링 7가지 팁 (0) | 2022.05.24 |
|---|---|
| React :: styled-components로 컴포넌트 스타일 바꾸기 feat. 실패 예시 (0) | 2022.02.14 |
| [React] HTML과 JSX에서 다른점(Inline style부분) (0) | 2020.07.20 |
| [React] 리액트는 컴포넌트로 이루어져 있다 (0) | 2020.07.15 |
| [React]는 UI를 만들기 위한 자바스크립트 라이브러리 by 페이스북 (0) | 2020.07.11 |