Posts
Next.js3분

[Next] 개발 패턴(Layout & SEO)

목차4

Layout

너무 큰 _app.js 파일은 좋지 않아서 레이아웃과 관련된 부분은 Layout 컴포넌트로 따로 분리한다.

대중적으로 사용하는 패턴

  • components 에 Layout.js 파일을 생성한다.
  • Layout 컴포넌트에 { children } 을 매개변수로 지정한다.
  • Layout 컴포넌트의 코드 예시는 아래와 같다._app.js 에서 Layout 컴포넌트를 아래와 같이 사용한다.
코드
import NavBar from './NavBar';

export default function Layout({ childredn }) {
  return (
    <>
      <NavBar />
      <div>{childredn}</div>
    </>
  );
}
코드
import Layout from '../compenents/Layout';
import '../styles/globals.css';

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

Head 컴포넌트

Next에서 제공하는 Head 컴포넌트를 사용한다. Head 컴포넌트 안의 내용이 html의 head구간에 보여진다.

코드
import Head from 'next/head';

예를 들어 title을 사용하면 아래와 같다.

코드
import Head from 'next/head';

<Head>
  <title>Home | Next Movies</title>
</Head>;

  • Next는 자주 사용되는 기능들을 제공되는 작은 패키지들로 구현할 수 있다는 장점이 있다.
  • 작은 패키지들이 여러 라이브러리가 아닌 Next 하나의 프레임워크에서 사용 할 수 있다는 것이 호환성 등 오류의 가능성을 줄인다.

SEO

Search Engine Optimization의 약자로 웹에 올리는 컨텐츠가 구글, 네이버, 다음 같은 검색 엔진으로부터 제대로 인식이 될 수 있도록 최적화를 하는 작업이다.

최적화 방법에는 양질의 콘텐츠를 제공하거나, 접근성이나 성능적으로 뛰어난 웹을 개발하는 방법 등이 있지만 가장 기본적인 방법으로는 해당 페이지에 적합한 메타태그 를 삽입해서 크롤러가 웹을 잘 분석해서 인덱싱 하는데 도움을 주는 방법이 있다.

구글에서는 최대한 많은 페이지가 인덱싱 되는 것이 검색엔진 최적화에 도움이 된다고 언급했기 때문에 각 페이지마다 해당 페이지의 용도를 잘 설명해주는 메타태그를 삽입해 주는 것이 좋다.

Next의 Head 컴포넌트를 사용하면 쉽게 메타태그를 삽입할 수 있다.

코드
import Head from 'next/head';

export default function HeadMeta() {
  return (
    <Head>
      <title>제목</title>
      <meta name='description' content='페이지 설명' />
      <meta name='viewport' content='width=device-width, initial-scale=1' />
      ...
    </Head>
  );
}

위의 내용은 페이지의 소스를 보면 head태그 안에 위치한다.

index.js 파일에 Head 직접 사용할 수도 있지만 component 폴더에 Head태그와 내용을 관리하는 컴포넌트를 따로 만들어서 효율적으로 관리할 수 도 있다. 이는 중복코드 작성을 방지할 수도 있다.

예를 들어, components/SEO.js 컴포넌트를 생성하고 index.js 에서 SEO 컴포넌트의 prop으로 title 을 받는다.

title 외에 더 많은 prop을 받아서 SEO를 변경 할 수 있다.

코드
import Head from 'next/head';

export default function Seo({ title }) {
  return (
    <>
      <Head>
        <title>Home | Next Movies</title>
      </Head>
    </>
  );
}
코드
import Seo from '../components/Seo';

export default function Home() {
  return (
    <>
      <Seo title='Home' />
      <h1>Hello Wolrd!</h1>
    </>
  );
}

반응형