Next.js | 개발

by

공들여 나열한 것

너무 큰 _app.js 파일은 좋지 않기 때문에 레이아웃과 관련된 부분이 레이아웃 컴포넌트로 분할됩니다.

인기있는 패턴

  • 구성 요소에서 Layout.js 파일을 만듭니다.

  • 레이아웃 구성요소의 매개변수로 { children }을 지정합니다.

  • 레이아웃 컴포넌트 코드 예제는 다음과 같습니다.

    _app.js에서 다음과 같이 레이아웃 컴포넌트를 사용합니다.

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>
    </>
  );
}

머리판

Next에서 제공하는 헤드 컴포넌트를 사용합니다.

헤드 구성 요소의 내용은 HTML의 헤드 섹션에 표시됩니다.

import Head from 'next/head';

예를 들어 제목을 사용하면 다음과 같습니다.

'추천 관련글, 
import Head from 'next/head';

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


Next.js | 개발 1

  • 다음은 자주 사용하는 기능을 작은 패키지로 구현할 수 있다는 장점이 있습니다.

  • 여러 라이브러리 대신 더 작은 패키지를 Next 프레임워크에서 사용할 수 있다는 사실은 비호환성과 같은 버그의 가능성을 줄입니다.

SEO

검색 엔진 최적화(Search Engine Optimization)의 약자로 웹에 업로드된 콘텐츠를 구글, 네이버, 다음과 같은 검색 엔진에서 제대로 인식할 수 있도록 최적화하는 과정입니다.

최적화 방법으로는 양질의 콘텐츠를 제공하거나 접근성이나 성능이 뛰어난 웹을 개발하는 방법이 있지만 가장 기본적인 방법은 크롤러가 웹을 분석하고 색인을 생성할 수 있도록 페이지에 적합한 메타 태그를 포함시키는 것입니다.

Google은 최대한 많은 페이지를 인덱싱하는 것이 검색 엔진 최적화에 도움이 된다고 명시했기 때문에 각 페이지에 페이지의 목적을 설명하는 메타 태그를 포함하는 것이 좋습니다.

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

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 태그에 있습니다.

head는 index.js 파일에서 직접 사용할 수 있지만 head 태그와 content를 관리하는 별도의 component를 컴포넌트 폴더에 생성하여 효율적으로 관리할 수 있습니다.

이것은 또한 중복 코드가 작성되는 것을 방지할 수 있습니다.

예를 들어 구성 요소 구성 요소/SEO.js를 만들고 index.js에서 SEO 구성 요소의 소품으로 제목을 가져옵니다.

제목 외에 다른 소품을 얻어서 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>
    </>
  );
}