Next.js (3) - 동적 페이지 만들기

joker·2020년 3월 23일
0

NEXT.js

목록 보기
4/4

Create Dynamic Pages

이제 여러 페이지로 기본 Next.js 앱을 만드는 방법을 알게되었습니다. 페이지를 만들려면 디스크에 실제 파일을 만들어야합니다.

그러나 실제 앱에서는 동적 콘텐츠를 표시하기 위해 페이지를 동적으로 만들어야합니다. Next.js에는 여러 가지 접근 방식이 있습니다.

쿼리 문자열 을 사용하여 동적 페이지를 만들기 시작 합니다.
간단한 블로그 앱을 만들어 보도록 하겠습니다.

첫 페이지 만들기

components/MyLayout.js에 아래와 같은 코드를 작성해 보세요

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
);

export default Layout;

pages/index.js에 아래와 같은 코드를 작성해 보세요.

import Layout from '../components/MyLayout';
import Link from 'next/link';

const PostLink = props => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
);
export default function Blog() {
  return (
    <Layout>
      <h1>My Blog</h1>
      <ul>
        <PostLink title="Hello Next.js" />
        <PostLink title="Learn Next.js is awesome" />
        <PostLink title="Deploy apps with Zeit" />
      </ul>
    </Layout>
  );
}

이후 Hello Next.js 클릭시 404 This page could not be found.에러가 발생하며 http://localhost:3000/post?title=Hello%20Next.js의 URL로 들어가지게 됩니다.

쿼리 문자열을 통해 데이터 전달하기

쿼리 문자열 매개 변수 (쿼리 매개 변수)를 통해 데이터를 전달합니다. 우리의 경우 title쿼리 매개 변수입니다. PostLink아래와 같이 컴포넌트로 이를 수행 합니다.

const PostLink = props => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
);

마찬가지로 쿼리 문자열로 원하는 모든 종류의 데이터를 전달할 수 있습니다.

post 페이지 만들기

이제 블로그 게시물을 표시하기 위해 게시물 페이지를 만들어야합니다. 그렇게하려면 쿼리 문자열에서 제목을 가져와야합니다.

pages/post.js에 아래와 같은 코드를 작성해 보세요.

import { useRouter } from "next/router";
import Layout from "../components/MyLayout";

const Page = () => {
	const router = useRouter();

	return (
		<Layout>
			<h1>{router.query.title}</h1>
			<p>This is the blog post content.</p>
		</Layout>
	);
};

export default Page;
  1. next/router Next.js의 반환하는 router 개체를 우리는 import하여 useRouter를 통해 사용하였습니다.
  2. 이 경우 query쿼리 문자열 매게 변수가 있는 라우터의 개체를 사용하고 있습니다.
  3. 그러므로 우리는 router.query.title의 title을 얻을 수 있습니다.

Router

보시다시피, useRouter를 사용하면 router페이지 내부의 객체 에 액세스 할 수 있으며 React Hook 이며 기능적 구성 요소와 작동합니다.
다음 예 useRouter에서는 내 보낸 페이지 이외의 구성 요소에 추가되는 것을 볼 수 있습니다 .

pages/post.js에 아래와 같은 코드를 작성해 보세요.

import { useRouter } from 'next/router';
import Layout from '../components/MyLayout.js';

const Content = () => {
  const router = useRouter();
  return (
    <>
      <h1>{router.query.title}</h1>
      <p>This is the blog post content.</p>
    </>
  );
};

const Page = () => (
  <Layout>
    <Content />
  </Layout>
);

export default Page;

동적 라우팅으로 URL 정리하기

여기서는 Next.js 의 동적 라우팅 기능 을 사용하여의 동적 경로 를 처리 할 수 있습니다 /pages에 새 페이지를 추가하여 첫 번째 동적 경로를 만들고 먼저 안에 pages/p/[id].js폴더를 추가해야 하며 페이지가 호출 됩니다. 그런 다음 다음 내용을 추가하십시오./p/pages[id].js

import { useRouter } from 'next/router';
import Layout from '../../components/MyLayout';

export default function Post() {
  const router = useRouter();

  return (
    <Layout>
      <h1>{router.query.id}</h1>
      <p>This is the blog post content.</p>
    </Layout>
  );
}

pages/index.js

import Layout from '../components/MyLayout';
import Link from 'next/link';

const PostLink = props => (
  <li>
    <Link href="/p/[id]" as={`/p/${props.id}`}>
      <a>{props.id}</a>
    </Link>
  </li>
);

export default function Blog() {
  return (
    <Layout>
      <h1>My Blog</h1>
      <ul>
        <PostLink id="hello-nextjs" />
        <PostLink id="learn-nextjs" />
        <PostLink id="deploy-nextjs" />
      </ul>
    </Layout>
  );
}
profile
개발자입니다.

0개의 댓글