[NextJS] Layout & Head

강은비·2022년 6월 13일

nextjs

NextJS

목록 보기

4/10

NextJS 공식문서 👍

Layout

Head

Layout

navigation이나 footer와 같은 공통 레이아웃은 Layout component로 만들고 _app.tsx에 import하여 렌더링한다.

Example

// components/Layout.tsx

import React from "react";
import NavBar from "./NavBar";

const Layout = ({ children }: React.PropsWithChildren) => {
  return (
    <div>
      <NavBar />
      <div>{children}</div>
    </div>
  );
};

export default Layout;

// components/Layout.tsx

import React from "react";
import NavBar from "./NavBar";

const Layout = ({ children }: React.PropsWithChildren) => {
  return (
    <div>
      <NavBar />
      <div>{children}</div>
    </div>
  );
};

export default Layout;

Head

Head component의 children으로 들어가는 태그들이 html의 head 안에 보여질 것이다.
Head component는 html의 head 태그와 비슷한 역할을 한다.

// components/CustomHead.tsx

import Head from "next/head";

interface CustomHeadProps {
  title: string;
}

const CustomHead = ({ title }: CustomHeadProps) => {
  return (
    <Head>
      <title>{title} | Next Movies</title>
    </Head>
  );
};

export default CustomHead;

// pages/index.tsx

import type { NextPage } from "next";
import CustomHead from "../components/CustomHead";

const Home: NextPage = () => {
  return (
    <div>
      <CustomHead title="Home" />
      <h1>Home</h1>
    </div>
  );
};

export default Home;

// pages/about.tsx

import type { NextPage } from "next";
import CustomHead from "../components/CustomHead";

const About: NextPage = () => {
  return (
    <div>
      <CustomHead title="About" />
      <h1>About</h1>
    </div>
  );
};

export default About;

강은비

이전 포스트

[NextJS] CSR vs SSR

다음 포스트

[NextJS] Layout & Head

NextJS

Layout

Head

[NextJS] CSR vs SSR

[NextJS] Redirects & Rewrites

0개의 댓글