NEXT.JS 자습서
개시하다
나는 자신의 필기를 쓰고 있다.
페이지 만들기
export default function FirstPost() {
return <h1>First Post</h1>
}
Link 구성 요소
import Link from 'next/link'
<h1 className="title">
Read{' '}
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}
→
※ 이른바 prefetch
미리 서버 쪽에서 읽어 디스플레이를 고속화하기
Asset
정적 파일(txt, 이미지 등)
• Public 디렉토리의 정적 파일 참조
• Public 기반 경로 기술
정적 파일 경로
<img src="/〇〇.svg" alt="Vercel Logo" className="logo" />
imgディレクトリを作った場合
<img src="/img/〇〇.svg" alt="Vercel Logo" className="logo" />
Image 어셈블리
インポートすることで利用可能になる
import Image from 'next/image'
이미지 최적화
→ Next.js의next/image 구성 요소 사용 방법 및 주의사항
<Image
src="/images/profile.jpg" // Route of the image file
height={144} // Desired size with correct aspect ratio
width={144} // Desired size with correct aspect ratio
alt="Your Name"
/>
Head 구성 요소
CSS 및 CDN 읽기
import Head from 'next/head'
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
pages/_document.js의 "속성을 사용자 정의할 수 있습니다
→ 사용자 지정 문서
CSS 스타일
구성 요소 레이아웃
components/layout.js
export default function Layout({ children }) {
return <div>{children}</div>
}
import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'
export default function FirstPost() {
return (
<Layout>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</Layout>
)
}
components/layout.module.css
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
• 구성 요소에 같은 클래스 이름이 없으면 독특한 클래스 이름을 만들 수 있습니다
• 구성 요소에 따라 스타일을 바꾸기 편할 때
• Layout 구성 요소로 패키지
• CSS Modules를 사용하는 경우 CSS 파일 이름 끝에
.module.csscomponents/layout.jsスタイルを追加
import styles from './layout.module.css'
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>
}
global style
pages/_app.js에 글로벌 CSS를 추가할 수 있으며 다른 곳에서 가져올 수 없습니다
_app.정보
→인증된 삼성 Auth 등
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
pages/_app.js
import '../styles/global.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
Pre-rendering
기본 모든 페이지
pre-render = HTML 사전 생성
→ 일반적으로 브라우저에서 HTML을 읽은 후 표시
미리 다른 곳에서 읽다.사용자가 액세스하기 전에 읽기
일반적인 React 프로그램에서 브라우저의 js 읽기를 잘못하면 프로그램을 표시할 수 없습니다
→ 브라우저에서 js를 읽어 HTML 생성
브라우저 로드 감소, 디스플레이 속도 향상
→ 서버가 미리 읽기
검색엔진의 기어오르기에서 내용을 볼 수 있다
→ 미리 렌더링하여 페이지를 찾을 수 없도록 하기
일반적으로 브라우저가 읽고 있을 때 내용이 없는 것으로 판단되어 SEO의 부정적인 평가를 초래한다
렌더링 유형
한 응용 프로그램에서 구분해서 사용할 수 있다
1. Static Site Generation(SSG: 정적 사이트 생성)
→ 구축 후 HTML 사전 생성
사용자는 모두 같은 페이지를 볼 수 있다
빠른 업데이트 빈도가 낮은 사용자 표시: 컨텐츠=1:N
블로그 EC 웹 사이트 LP 쿼리 예
2.Server Side Rendering (SSR)
→ 사용자가 액세스할 때 서버 측면에서 HTML 생성
사용자가 방문한 시간에 따라 업데이트될 가능성이 있습니다
최신 상태에서 사용자가 페이지를 볼 수 있습니다
느려진 업데이트 빈도가 높은 사용자 표시: 컨텐트=N:N
SNS 채팅 영상 게시 예제 실시간
3.Client Side Rendering （CSR）
- 사용자가 액세스할 때 브라우저가 불러옵니다
SEO 페이지가 중요하지 않음
샘플 관리 화면 서비스 사이트
정적 생성
데이터가 있든 없든 실행할 수 있다
외부 데이터 없음
→ 구성할 때 HTML 표시
외부 데이터 있음
→ １. 구축 시 DB 또는 외부 API에서 데이터 가져오기
2. 얻은 데이터로 HTML 렌더링
getStaticProoos 사용()
getStaticProps
• 외부 데이터 가져오기
• async/await로 비동기 처리 제어 가능
• 공식 환경에서 구축할 때 실행
• 개발 환경에서 요구에 따라 실행(npm run dev)
• 페이지 구성 요소에서만 사용 가능
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: ...
}
}
외부 데이터를fetch할 때
export async function getSortedPostsData() {
// Instead of the file system,
// fetch post data from an external API endpoint
const res = await fetch('..')
return res.json()
}
질의 얻기
import someDatabaseSDK from 'someDatabaseSDK'
const databaseClient = someDatabaseSDK.createClient(...)
export async function getSortedPostsData() {
// Instead of the file system,
// fetch post data from a database
return databaseClient.query('SELECT posts...')
}
getServerSideProps
• 요청마다 수행하는 함수
• Server Side Rendering용
• 외부 데이터 가져오기
• Async/await를 사용하여 비동기 처리 제어 가능
• 페이지 구성 요소에서만 사용 가능
export async function getServerSideProps(context) {
return {
props: {
// props for your component
}
}
}
SWR
• Next.js에서 준비한 SWR이라는 Hooks
• Celient-side를 통해 데이터를 가져올 때 권장
• 가져온 데이터는 {key:value}(대상) 형식으로 캐시할 수 있습니다
• Real-time로 데이터 업데이트(데이터의 재fetch)
→ 반환 키를 눌러도 데이터를 가져와 최신 상태로 업데이트할 수 있습니다
• JAMstack 방향
→ 개발 방법
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetch)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
Dynamic Routes
• 파일 이름이 []이면 DynamicRoutes
• id에 따라 경로 변경
pages/posts/[id].js
ex. URL → https://example.com/posts/[pre-rendering]
getStaticPaths
• Id 동적 변경 섹션 작성 시 사용
• paths와 fallback 반환
• Paths는 미리 구성된 경로 객체를 지정하는 매개변수입니다.
• Fallback은 미리 만들어진 경로를 제외하고 접근할 때의 동작
import { getAllPostIds } from '../../lib/posts'
export async function getStaticPaths() {
const paths = getAllPostIds()
// オブジェクト型で返す
return {
paths,
fallback: false → trueなら事前に用意した404のサイトを見せる
}
}
Catch-all Routes
return [
{
params: {
// Statically Generates /posts/a/b/c
id: ['a', 'b', 'c']
}
}
//...
]
export async function getStaticProps({ params }) {
// params.id will be like ['a', 'b', 'c']
}
API 경로
※ 미리 보기 모드란
static generation 을 사용할 때, 구축할 때의 반영이 아닙니다
요청 시 데이터 추출을 반영하는 기능
pages/api/〇〇.js
// req = HTTP incoming message, res = HTTP server response
export default function handler(req, res) {
// ...
}
→ https://nextjs.org/docs/api-routes/dynamic-api-routes
Vercel로 설계
→ https://nextjs.org/learn/basics/deploying-nextjs-app/deploy
Gatsby 웹 사이트를 무료 서버 Vercel에 공개하는 방법에 대한 철저한 설명
공부할 때는 아래의 유튜브를 참고했다.
설명이 너무 쉬워서 추천합니다.
트라하크 엔지니어 학습 강좌 일본에서 가장 통속적이고 알기 쉬운 넥스트.입문
Reference
이 문제에 관하여(NEXT.JS 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/thao_0108/articles/d034464183d0c7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
