사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴

_app.js 즉 custom app component를 사용할 때 쓰는 것

: layout 패턴

Layout 패턴

사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴

_app.js 즉 custom app component를 사용할 때 쓰는 것

: layout 패턴

components 안에 js 파일을 만들고

<Layout.js>

import NavBar from "./Navbar";

export default function Layout({ children }) {
  // children은 react.js가 제공하는 prop
  // 하나의 component를 또 다른 comonent 안에 넣어줄 수 있다
  return (
    <>
      <NavBar />
      <div>{ children }</div>
    </>
  );
}

children이라는 prop를 전달해준다.

<_app.js>

import Layout from "../components/Layout";
import NavBar from "../components/Navbar";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </Layout>
  );
}

Layout으로 안에 있는 것들을 감싸준다.

NextJS의 특징

작은 패키지들을 이용할 수 있다.

import Head from "next/head";

// JSX 안에서
    <Head></Head>

=> 이처럼 흔하게 쓰이는 기능들을 패키지들로 구현할 수 있다.

create react app 으로 작업했다면 react helmet 같은 것을 다운로드해야하지만

Next.js 안에 들어있는 요소(Head)를 이용할 수 있다는 것,

이 아이디어를 조금 더 발전시켜서

< components에 있는 Seo.js >

import Head from "next/head";

export default function Seo({ title }) {
  return (
    <Head>
      <title>{title} | Next Movies</title>
    </Head>
  );
}

index.js와 about.js에

      <Seo title="Home" />
      <Seo title="About" />

title props를 전달 해 주면 Head 부분이 잘 바뀌는 것을 볼 수 있다.

Public에 있는 파일 쉽게 찾아오기

      <img src="/vercel.svg" alt="" />

그냥 /하고 파일 이름만 써주면 된다.

상대 경로로 들어갈 필요가 없음.

사실 img가 아니라 nextJS에서 제공해주는 img 패키지가 있다.

하지만 이 수업에서는 다루지 않음 => 따로 찾아볼 예정!

'✍ 공부 > NextJS' 카테고리의 다른 글

[ TIL ] Next.js 동적 라우팅 ( Dynamic Routing ) (0)	2022.03.19
[ TIL ] Next.js redirects와 rewrites로 API key 숨기기 (0)	2022.03.18
Next.js에서 .env 사용하기 (2)	2022.03.18
[ Next.js ] SSR , CSR 그리고 SEO (0)	2022.03.17
[ NextJS ] styled jsx ( 노마드코더 NextJS ) (0)	2022.03.15

[ TIL ] 노마드코더 NextJS #2.0 - #2.1

Layout 패턴

NextJS의 특징

Public에 있는 파일 쉽게 찾아오기

'✍ 공부 > NextJS' 카테고리의 다른 글

티스토리툴바