Patterns
Next.js 프로젝트에서 흔히 사용되는 개발 패턴들이 있는데, 먼저 _app.js 컴포넌트에 사용하는 Layout 패턴을 알아보자!
[components/Layout.js]
import NavBar from "./NavBar";
export default function Layout({ children }) {
return (
<>
<NavBar />
<>{children}</>
</>
);
}Layout.js 파일을 생성해 기존 App.js 처럼 항상 활성화시킬 컴포넌트를 넣어준다
* children을 사용해 props로 컴포넌트를 전달할 수 있다
[pages/_app.js]
import Layout from "../components/Layout";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
return (
<>
<Layout>
<Component {...pageProps} />
</Layout>
</>
);
}Layout으로 감싸주면 _app.js의 레이아웃 컴포넌트들을 따로 관리해 간소화 시킬 수 있다
다음으로 next의 Head를 활용해 각 Page에 메타 데이터를 넣어주자
[components/Seo.js]
import Head from "next/head";
export default function Seo(props) {
return (
<Head>
<title>{props.title} | Next Movies</title>
</Head>
);
}Head를 import한 해당 컴포넌트를 실제 head 태그처럼 사용할 수 있다
[components/index.js]
import Seo from "../components/Seo";
export default function Home() {
return (
<>
<Seo title={"Home"} />
<h1>Hello</h1>
</>
);
}이런식으로 각 Page의 title 태그를 설정할 수 있다!
Fetching Data
public 폴더에 있는 파일들은 경로와 관계없이 바로 import할 수 있다
<img src="/vercel.svg" />모든 파일에서 바로 사용할 수 있다!
Next.js를 이용해 API 데이터를 fetch해보자
영화 API를 받아오기 위해 아래 사이트에 가입하자🔽
The Movie Database (TMDB)
Welcome. Millions of movies, TV shows and people to discover. Explore now.
www.themoviedb.org
'설정 > API > API 키 생성 > API 키 (v3 auth)'에서 API 키를 확인해주자
API Docs
developers.themoviedb.org
API 문서를 참고해 형식에 맞게 GET 요청을 보내자
[pages/index.js]
import { useEffect, useState } from "react";
import Seo from "../components/Seo";
const API_KEY = "9b0e7d1b3aae058c0f694b71c60b5bfc";
export default function Home() {
const [movies, setMovies] = useState();
useEffect(() => {
(async () => {
const { results } = await (
await fetch(
`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
)
).json();
setMovies(results);
})();
}, []);
return (
<>
<Seo title={"Home"} />
{!movies && <h4>Loading...</h4>}
{movies?.map((movie) => (
<div key={movie.id}>
<h4>{movie.original_title}</h4>
</div>
))}
</>
);
}useEffect와 async & await 문법으로 API 데이터를 fetch 해준다
const [movies, setMovies] = useState([]);
…
<Seo title={"Home"} />
{movies.map((movie) => (
<div key={movie.id}>
<h4>{movie.original_title}</h4>
</div>
))}로딩 화면을 구현하지 않는 경우, map을 돌리기 위해 초기값을 넣어줘야 한다
fetch, async & await 🔽
JavaScript - 자바스크립트 fetch와 async/await
컴퓨터/IT/알고리즘 정리 블로그
chanhuiseok.github.io
본 내용은 노마드코더의 'NextJS 시작하기'를 바탕으로 작성되었습니다
'Front-end > Next.js' 카테고리의 다른 글
| [노마드코더] #6 Dynamic Routes & Detail (4) | 2022.02.24 |
|---|---|
| [노마드코더] #5 Redirect & Rewrite, SSR (0) | 2022.02.19 |
| [노마드코더] #3 CSS, Custom App (2) | 2022.02.10 |
| [노마드코더] #2 Pages & Routing (4) | 2022.02.08 |
| [노마드코더] #1 Create Next App (8) | 2022.02.04 |