Keyword

next.js

layout pattern

layout을 따로 안만드는줄 알았는데 만든다

// components/Layout.tsx 생성
import { ReactNode } from "react";
import NavBar from "./NavBar";

interface Props {
  children: ReactNode;
}

// children이라는 Props로 react component를 받을 수 있다
export default function Layout({ children }: Props) {
  return (
    <>
      <NavBar />
      <div></div>
    </>
  );
}

// _app.tsx
import type { AppProps /*, AppContext */ } from "next/app";
import Layout from "../components/Layout";
import "../styles/globals.css";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </div>
  );
}

App component에는 들어갈 내용들이 많기 때문에
최대한 컴포넌트를 외부로 빼서 간략하게 만든다

Head

next.js는 내장된 작은 패키지들을 사용할 수 있다
Head는 react-helmet 같은..?

public

next.js는 public 디렉토리가 default로 설정되어있어서
img src에 "/파일명" 으로 바로 접근 가능하다
img 태그 대신에 next의 image 컴포넌트를 사용하라는 경고가 뜨긴 함..

fetch

import { useEffect, useState } from "react";
import SEO from "../components/SEO";
import { Result } from "../types/movie";

const API_KEY = "10923b261ba94d897ac6b81148314a3f";

export default function Home() {
  const [movies, setMovies] = useState<Result[]>();
  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
      setMovies(results);
    })();
  }, []);
  return (
    <div>
      <SEO title="Home" />
      <h1 className="active">Hello</h1>
      {!movies && <h4>Loading...</h4>}
      {movies?.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}