react의 라이브러리,
next.js로 만든 사이트 예제입니다.
예제는 유튜버, code Scalper님의 강의를 들으면서 공부한 내용입니다.
구현 영상
구현 화면
Home 페이지
Photes 페이지
photo 이미지별 세부 페이지
폴더 구조
getServerSideProps, getStaticProps
getServerSideProps
- 페이지에 들어올때마다 즉시 데이터 전송
- 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옴
export const getServerSideProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_start=0&_end=10')
const posts = await res.json();
return {
props: {
posts
}
}
}
getStaticProps
- build시 고정되는 값으로, build 이후에는 변경이 불가함
- 변동성이 잦은 페이지가 아닐 경우, getStaticProp를 이용하여 미리 html 을 만들어놓으면 빠른 렌더링을 실행
- revalidate를 이용하여 데이터를 동기화시킴
export const getStaticProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_start=0&_end=10')
const posts = await res.json();
return {
props: {
posts
},
revalidate: 20 //increament static re-generation - 처음 접속 후 일정 시간 뒤 접속이 일어나면 랜더링
}
}
pages > index.js
home 화면, getStaticProps 방식
import HeadInfo from "../components/HeadInfo"
import Image from 'next/image'
export default function Home({ posts }) {
return (
<div>
<HeadInfo title={'Next.js photos'} />
<h1 style={{ textAlign: "center" }}>Hello Next.js!</h1>
<ul>
{posts.map(post => <li key={posts.id}>{post.title}</li>)}
</ul>
</div>
)
}
//getStaticProps
export const getStaticProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_start=0&_end=10')
const posts = await res.json();
return {
props: {
posts
},
revalidate: 20 //increament static re-generation - 처음 접속 후 일정 시간 뒤 접속이 일어나면 랜더링
}
}
pages > photos.js
photos 화면, getStaticProps 방식
import HeadInfo from "../components/HeadInfo"
import Image from 'next/image'
import styles from "../styles/Photos.module.css"
import Link from 'next/link'
const photos = ({ photos }) => {
return (
<div>
<HeadInfo title={'Next.js photos'} />
<h1 style={{ textAlign: "center" }}>Gallery</h1>
<ul className={styles.photos}>
{photos.map(photo =>
<li key={photo.id}>
<Link href={`/photos/${photo.id}`}>
<a>
<Image src={photo.thumbnailUrl} alt={photo.title}
width={100} height={100} />
<span>{photo.title}</span>
</a>
</Link>
</li>
)}
</ul>
</div>
);
};
export const getStaticProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/photos?_start=0&_end=10')
const photos = await res.json();
return {
props: {
photos
},
revalidate: 20
}
}
export default photos;
components > HeadInfo.js
import Head from 'next/head'
const HeadInfo = ({ title, keyword, content }) => {
return (
<Head>
<title>{title}</title>
<meta keyword={keyword} />
<meta content={content} />
</Head>
);
};
HeadInfo.defaultPros = {
title: 'Next.js',
keyword: 'Next practice page',
content: 'Next practice page'
}
export default HeadInfo;
pages > _app.js
Layout으로 감싸 Component에 children인 Home과 Photos pages가 들어갑니다.
import '../styles/globals.css'
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
components > Layout.js
import Nav from './Nav'
const Layout = ({ children }) => {
return (
<>
<Nav />
<div>
{children} //home, photos 페이지
</div>
</>
);
};
export default Layout;
components > Nav.js
import Link from 'next/link';
import styles from '../styles/Nav.module.css';
const nav = () => {
return (
<nav className={styles.nav}>
<ul>
<li><Link href='/'>Home</Link></li>
<li><Link href='/photos'>Photos</Link></li>
</ul>
</nav>
);
};
export default nav;
next.js의 동적 라우팅 예제는 아래 포스트로 이동해주세요.
https://goddino.tistory.com/233
[react] next.js 사이트 만들기 (ft. 동적 라우팅) ver.2
react 라이브러리, next.js로 만튼 사이트 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 화면 http:.../photos/1 와 같이 상세 페이지로 접근합니다. 폴더 구조
goddino.tistory.com
반응형
'💻CODING > react. vue' 카테고리의 다른 글
| [react] 장바구니 추가, 삭제, 전체 삭제 기능 구현 (0) | 2021.09.10 |
|---|---|
| [react] next.js 사이트 만들기 (ft. 동적 라우팅) ver.2 (0) | 2021.09.08 |
| [react] Object is possibly 'null' (ft. typescript, style) 오류 해결 (0) | 2021.09.06 |
| [react] 체크 박스 토글 기능 구현 (ft. new Set(), checked) (4) | 2021.09.05 |
| [react] vs code rsc 입력 후 자동 코드 설치 플로그인 (0) | 2021.09.05 |
댓글