Next.js 문서보기
Next.js
Create a Next.js App
리액트를 빌드할 때 해야하는 것
- 웹팩같은 번들러로 번들링, babel같은 컴파일러로 commonJS형태로 변환
- 코드 스플리팅 같은 최적화가 필요함.
- 성능과 SEO를 위해 pre-render이 필요하고 그와 동시에 SSR 또는 CRS필요
- data store에 웹 앱을 연결시키기 위해 몇몇 서버사이드 코드를 작성해야 할 것.
Next.js : 리액트 프레임워크
- 위의 4가지에 대한 해결책을 모두 제공해줌.
- 특징
- 직관적인 페이지 기반의 라우팅 시스템(+다이나나믹 라우트 제공)
- 프리렌더링이 지원됨.
- 자동적으로 코드 스플리팅(더 빠른 페이지 로딩 지원)
- Built-in CSS, Sass , CSS-in-JS 지원
- 개발환경에 빠른 새로고침을 제공
- 서버리스 기능으로 API 엔드포인트를 구축하는 API 라우팅
Blog 만들기 예제
Navigate Between Pages
📖 * 새로운 페이지 생성(파일 시스템 라우팅)
* Link 컴포넌트 사용법(클라이언트 사이드 네비게이션)
* 코드 스플리팅과 프리패칭(데이터 미리 불러오는 거)를 위한 기본적인 지원 기능
Pages in Next.js
- 파일 이름에 기반해 라우팅 됨. 즉, pages폴더 안에 원하는 대로 파일 구성해주면 됨.
- 컴포넌트는 아무 이름이나 써도 되지만, export default 형태로 꼭 export해주어야 함.
ex.
1. 'pages/index.js'는 '/' 라우트
2. 'pages/post/first-post.js'은 '/posts/first-post'로 라우트.
- Link Component
-
Link컴포넌트 === a tag.
-
href 속성에 route주소 알려주기.
import Link from 'next/link'
<Parent-Component>
<Link href="/psots/first-post">go to page</Link>
</Parent-Component>
-
a태그 스타일을 입히고 싶다면 아래처럼
<Link href="/">
<a>Back to home</a>
</Link>
- Client-Side Navigation
- 클라이언트 사이드 네비 : 자바스크립트를 이용한 페이지 전환. 즉, 브라우저에 의해 실행되는 기본 네비게이션에 비해 빠르다.
- 자바스크립트를 이용 ⇒ 페이지의 모든 내용을 새로 가져오지 않음(실제 css background 지정하고 다른 페이지 넘겼다가 다시 오면 배경색 유지됨)
- a태그이용하면 브라우저가 fully-refresh할 것임.(로딩 속도에 별로 안좋겠져~)
- Code splittnig and prefetching
- 자동적으로 코드 스플리팅이 됨.
- 각 페이지에 필요한 것만 로드함. ⇒ 빠른 로딩이 가능하게 함.
- 요청한 페이지의 코드만 로딩하므로 페이지는 다른 페이지와 분리되어 있음 ⇒ 특정 페이지가 에러를 발생시키더라도, 어플리케이션의 나머지 부분은 여전히 동작함.
- 프로덕션 빌드에서 Link 구성요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 자동으로 링크된 페이지의 코드를 백그라운드로 프리페치합니다.(넘어갈 페이지의 데이터가 프리페치되어 미리 준비되어 있다고 보면 됨)
Assets, Metadata, and CSS
리액트를 빌드할 때 해야하는 것
- 웹팩같은 번들러로 번들링, babel같은 컴파일러로 commonJS형태로 변환
- 코드 스플리팅 같은 최적화가 필요함.
- 성능과 SEO를 위해 pre-render이 필요하고 그와 동시에 SSR 또는 CRS필요
- data store에 웹 앱을 연결시키기 위해 몇몇 서버사이드 코드를 작성해야 할 것.
Next.js : 리액트 프레임워크
- 위의 4가지에 대한 해결책을 모두 제공해줌.
- 특징
- 직관적인 페이지 기반의 라우팅 시스템(+다이나나믹 라우트 제공)
- 프리렌더링이 지원됨.
- 자동적으로 코드 스플리팅(더 빠른 페이지 로딩 지원)
- Built-in CSS, Sass , CSS-in-JS 지원
- 개발환경에 빠른 새로고침을 제공
- 서버리스 기능으로 API 엔드포인트를 구축하는 API 라우팅
Blog 만들기 예제
Navigate Between Pages
📖 * 새로운 페이지 생성(파일 시스템 라우팅)
* Link 컴포넌트 사용법(클라이언트 사이드 네비게이션)
* 코드 스플리팅과 프리패칭(데이터 미리 불러오는 거)를 위한 기본적인 지원 기능
Pages in Next.js
- 파일 이름에 기반해 라우팅 됨. 즉, pages폴더 안에 원하는 대로 파일 구성해주면 됨.
- 컴포넌트는 아무 이름이나 써도 되지만, export default 형태로 꼭 export해주어야 함.
ex.
1. 'pages/index.js'는 '/' 라우트
2. 'pages/post/first-post.js'은 '/posts/first-post'로 라우트.
- Link Component
-
Link컴포넌트 === a tag.
-
href 속성에 route주소 알려주기.
import Link from 'next/link'
<Parent-Component>
<Link href="/psots/first-post">go to page</Link>
</Parent-Component>
-
a태그 스타일을 입히고 싶다면 아래처럼
<Link href="/">
<a>Back to home</a>
</Link>
- Client-Side Navigation
- 클라이언트 사이드 네비 : 자바스크립트를 이용한 페이지 전환. 즉, 브라우저에 의해 실행되는 기본 네비게이션에 비해 빠르다.
- 자바스크립트를 이용 ⇒ 페이지의 모든 내용을 새로 가져오지 않음(실제 css background 지정하고 다른 페이지 넘겼다가 다시 오면 배경색 유지됨)
- a태그이용하면 브라우저가 fully-refresh할 것임.(로딩 속도에 별로 안좋겠져~)
- Code splittnig and prefetching
- 자동적으로 코드 스플리팅이 됨.
- 각 페이지에 필요한 것만 로드함. ⇒ 빠른 로딩이 가능하게 함.
- 요청한 페이지의 코드만 로딩하므로 페이지는 다른 페이지와 분리되어 있음 ⇒ 특정 페이지가 에러를 발생시키더라도, 어플리케이션의 나머지 부분은 여전히 동작함.
- 프로덕션 빌드에서 Link 구성요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 자동으로 링크된 페이지의 코드를 백그라운드로 프리페치합니다.(넘어갈 페이지의 데이터가 프리페치되어 미리 준비되어 있다고 보면 됨)
Assets, Metadata, and CSS
ex.
1. 'pages/index.js'는 '/' 라우트
2. 'pages/post/first-post.js'은 '/posts/first-post'로 라우트.
-
Link컴포넌트 === a tag.
-
href 속성에 route주소 알려주기.
import Link from 'next/link' <Parent-Component> <Link href="/psots/first-post">go to page</Link> </Parent-Component>
-
a태그 스타일을 입히고 싶다면 아래처럼
<Link href="/"> <a>Back to home</a> </Link>
- 클라이언트 사이드 네비 : 자바스크립트를 이용한 페이지 전환. 즉, 브라우저에 의해 실행되는 기본 네비게이션에 비해 빠르다.
- 자바스크립트를 이용 ⇒ 페이지의 모든 내용을 새로 가져오지 않음(실제 css background 지정하고 다른 페이지 넘겼다가 다시 오면 배경색 유지됨)
- a태그이용하면 브라우저가 fully-refresh할 것임.(로딩 속도에 별로 안좋겠져~)
- 자동적으로 코드 스플리팅이 됨.
- 각 페이지에 필요한 것만 로드함. ⇒ 빠른 로딩이 가능하게 함.
- 요청한 페이지의 코드만 로딩하므로 페이지는 다른 페이지와 분리되어 있음 ⇒ 특정 페이지가 에러를 발생시키더라도, 어플리케이션의 나머지 부분은 여전히 동작함.
- 프로덕션 빌드에서 Link 구성요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 자동으로 링크된 페이지의 코드를 백그라운드로 프리페치합니다.(넘어갈 페이지의 데이터가 프리페치되어 미리 준비되어 있다고 보면 됨)
css를 추가해봅시당~(CSS, sass 지원)
📖 * static file 추가하는 법(이미지/페이지 메타데이터 같은 거) * 각 페이지마다 안에 들어가는 내용 커스터마이징 * CSS Module을 이용하는 재사용가능한 리액트 컴포넌트 작성하는 법 * global CSS 추가하기(in pages/_app.js) * Next.js에서 스타일링하는 팁Assets
- ‘public’폴더(가장 상위 레벨)에서 static assets 제공 가능
- public폴더 안에 있는 파일들은 참조될 수 있음
- public 디렉토리는 ‘robots.txt’(google site verification)에도 유용함
image
- public/images/[내이미지] 저장
- public이 static files의 root로, public안의 주소를 적어주면 됨.
jsx
<img src="/images/[내이미지] "/>
그러나 위와 같이 그냥 img태그를 쓰면 생기는 문제점이 있음
- 다른 화면 사이즈에 대한 핸들링 해야함
- 써드파티 툴/라이브러리를 이용해 이미지 최적화 해야함.
- 이미지가 뷰포트에 있을 때만 로딩 됨
Image Component and Image Optimization
- ‘next/image’는 HTML의 img태그를 모던 웹애 맞게 확장시킨 것.
- 기본적으로 이미지 최적화를 제공함(resizing, optimizing, WebP같은 현대적 포멧으로 이미지 제공)
- ⇒ 작은 사이즈의 스크린에서 큰 이미지를 들고오지 않아도 됨
- ⇒ 차후 미래의 이미지 포맷을 자동적으로 적용할 수 있음.
- 외부 데이터 소스여도 자동적으로 최적화 해줌.
Using the Image Component
- 유저들이 이미지를 요청하면, 그 때 최적화가 진행된다(빌드될 때 최적화x ⇒ 이미지가 몇개든 빌드 시간은 변화가 없음.)
- 이미지는 기본적으로 ‘lazy loading’. 이미지가 뷰포트안에 들어왔을 때 로드됨.
- Images are always rendered in such a way as to avoid Cumulative Layout Shift, a Core Web Vital
that Google is going to use in search ranking(SEO에 유리한 방식으로 렌더링 됨)
Metadata
- 컴포넌트를 이용해 각 페이지의 metadata 수정 가능.
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
Third-Party JavaScript
- cdn으로 다른 라이브러리나 소스를 가져올 때
- Script 컴포넌트 사용. <Script src=”link” / >로 들고옴.
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
속성은 따로 봐야할 것 같음
1. strategy : 언제 써드파티 스크립트가 로드되어야 할 지 정함. 2. onLoad : 스크립트가 로딩을 끝낸순간 실행된다.
CSS Styling
- styled-jsx : CSS-in_JS library
- 다른 css,scss 추가는 react 때랑 똑같이 하면 됨.
- 아래와 같이 사용해야 함!(css에 이름 붙여 import하고, className에는 css이름.사용할 클래스 로 지정해주어야 함)
- 이렇게 css modules를 이용하면 독창적인 이름을 알아서 지어줌.
// components/layout/layout.module.css
.container{
max-width: 36rem;
padding : 0 1rem;
margin : 3rem auto 6rem;
}
// components/layout/layout.js
import styles from "./layout.module.css"
export default function Layout({children}){
return <div className={styles.container}>{children}</div>
}
Global Styles
- 모든 페이지에 공통적으로 적용되기를 원하는 전역 css가 있다면?
- pages/_app.js 파일 생성
import '..styles/global.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
- 이 _app.js에서 global CSS를 추가할 수 있다.(다른데선X) 단순히 import로 불러와주기만 하면 됨!
Using classnames
library to toggle classes
(조건에 따라 클래스 바꾸기 위해서는 classnames 라이브러리 쓰는걸 춫천추천!)
[classnames](https://github.com/JedWatson/classnames)
is a simple library that lets you toggle class names easily. You can install it using npm install classnames
or yarn add classnames
.
Please take a look at its documentation for more details, but here’s the basic usage:
- Suppose that you want to create an
Alert
component which acceptstype
, which can be'success'
or'error'
. - If it’s
'success'
, you want the text color to be green. If it’s'error'
, you want the text color to be red.
You can first write a CSS module (e.g. alert.module.css
) like this:
.success {
color: green;
}
.error {
color: red;
}
And use classnames
like this:
import styles from './alert.module.css'
import cn from 'classnames'
export default function Alert({ children, type }) {
return (
<div
className={cn({
[styles.success]: type === 'success',
[styles.error]: type === 'error'
})}>
{children}
</div>)
Pre-rendering and Data Fetching
📖 * Next.js’ pre-rendering feature. * 프리 렌더링의 두 형태 : Staic Generation & Server-side Rendering. * Static Generation with data, and without data. * `getStaticProps` 사용 방법프리 렌더링
- Pre-render : next.js는 기본적으로 모든 페이지를 프리 렌더링하고 있다.(즉, Next.js는 사전에 각 페이지에 대한 HTML을 만들어 둔다.)
- 프리 렌더링 될 때 최소한의 js만 남기게 되고, 로딩될 때 js를 실행시켜 fully interactive하게 되어진다.(이 과정을 hydration이라고 함)
Two Forms of Pre-rendering
- Static Generation: 빌드하는 동안 HTML을 생성하는 프리렌더링 방식. 프리렌더링된 HTML은 요청이 들어올 때 재사용된다.
- Server-side Rendering: : 요청이 들어오면 각 요청에 대한 HTML을 만드는 프리렌더링 방식
Per-page Basis
- Next.js는 각 페이지마다 어떤 프리렌더링 방식을 사용할지 정하게 한다.(페이지마다 다른 프리렌더링 방식을 사용할 수 있음)
When to Use Static Generation VS Server-side-rendering
Static-Generation 추천
- 일반적으로 Static Generation을 추천. HTML 한 번 만들어주고 재활용이 가능하고, CDN으로 제공해 속도가 빠름
- 아래와 같은 사이트에서는 Static Generation이 유리
- 마케팅 페이지, 블로그 포스트, 쇼핑몰 상품 리스트, Q&A, documentation ...
- 사용자의 요청 이전에 페이지를 미리 렌더링해둬도 된다 ⇒ Static Generation 사용!
Server-side rendering 추천
- 사용자의 요청 시에 그 요청 정보를 가지고 렌더링을 해야하는 경우라면, Server-side rendering을 추천!
- 데이터가 자주 업데이트되고, 요청마다 페이지의 내용이 바뀌는 경우에 Server side rendering
- Static Generation보다는 느리지만 내용은 언제나 최신! 혹은 pre-rendering을 하지 않고 client-side js를 사용하는 방법도 있음.
Static Generation with and without Data
- Static Generation의 경우에 데이터가 있어도, 없어도 가능.
- 외부 데이터 없이 제작 가능 ⇒ 그냥 앱이 빌드될 때 정적으로 HTML페이지가 생성됨.
- 어떤 페이지는 외부 데이터를 먼저 불러와야 렌더링이 가능한 경우가 있음 ⇒ 요건 getStaticProps를 사용해서 처리 가능(Data Fetching ⇒ Static Generation)
Static Generation with Data using getStaticProps
- getStaticProps ⇒ async function.
export default function Home(props) { ... }
export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...
}
}
Essentially, getStaticProps allows you to tell Next.js: “Hey, this page has some data dependencies — so when you pre-render this page at build time, make sure to resolve them first!”
---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---
Next.js has two forms of pre-rendering:**Static Generation** and**Server-side Rendering**. The difference is in**when** it generates the HTML for a page.
-**Static Generation** is the pre-rendering method that generates the HTML at**build time**. The pre-rendered HTML is then_reused_ on each request.
-**Server-side Rendering** is the pre-rendering method that generates the HTML on**each request**.
md맨 위의 -- -- 사이의 title과 date.는 metadata임
이것은 gray-matter라는 라이브러리로 파싱이 가능함.
*/
Pre-rendering and Data Fetching하는 곳 제대로 안봤음 주의해서 볼것!
- 내가 무조건 최신의 데이터를 들고올 필요는 없다 ⇒ server side rendering사용하면 되는데, 이 때는 getServerSideProps라는 함수를 이용해야 함.
- Client-side Rendering의 경우 사용자의 요청에 따라 최신 검색이 필요할 경우인데,
SWR
- SWR : 데이터 페칭을 위한 리액트 훅.
- 클라이언트 사이드에서 데이터를 패칭해야 할 경우 적극 추천! 약간 useQuery 훅 쓰는 거랑 비슷함. {data,error} = useSWR(’’,~) 이런식으로.
Dynamic Routes
Page Path Depends on External Data
- page path가 external data에 의존하는 경우
- 그니까 이런거임
- posts 폴더에 있는 컴포넌츠들 이름을 가지고 라우트
- path : /posts/ , 는 posts폴더에 있는 파일의 이름.
Overview of the Steps
- [id].js파일을 만듦 . [로 시작하고 ]로 끝나는 이름을 갖는 페이지 ⇒ 다이나믹 라우트임
- export async function called ‘getStaticPaths’. 해당 함수는 id로 사용가능한 값을 반환한다.
- 마지막으로 getStaticProps가 필요. → 주어진 id를 이용해 블로그 포스트에 필요한 데이터를 패치 . getStaticProps는 params를 제공함.
Dynamic Routes Details
Here is some essential information you should know about dynamic routes.
Fallback
- getStaticPaths에서 return 내용에 {fallback:false}를 넣어서 보냈음. 근데 fallback이 머죠?
- if fallback is false ⇒ 결과가 404인 path는 리턴X
- if fallback is true, getStaticProps의 행동이 변함
- getStaticPaths에서 리턴된 paths이 렌더될 것임
Dynamic Routes 맨 마지막 페이지 덜함!~(22.02.19)
API Routes
Deploy
Author And Source
이 문제에 관하여(Next.js 문서보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@brill_be/Next.js-문서보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)