Next.js - 기초

김동하·2020년 12월 14일
0

next

목록 보기
1/10
post-thumbnail

동적 페이지 만들기

Index에 PostLink를 만드는데 props를 인자로 받아서 Link를 생성한다. 여기서 title은 query의 매개변수다. PostLink 컴포넌트 안에서 Link 컴포넌트에서 props를 내려준 것이다.

게시물 페이지

query string의 title을 가져와 페이지를 만들어야 한다.

useRouter를 통해 rotuer를 확인하기 위해서는 list를 클릭하면 된다. 리스트를 클릭하게 되면 href에 의해 {`/post?title=${props.title}`}로 이동하게 되는데 post.js에서 router.query를 찍어보면

이렇게 찍힌다.

useRouter와 query를 이용하면 원하는 페이지로 이동이 가능하게 만든다.

useRouter를 통해 Next.js의 'router' 객체를 변수에 담았다. 즉, router 객체 안의 query에서 필요한 값을 가져올 수 있다.

에러가 나는 이유!

url prop은 페이지의 메인 컴포넌트에만 전달된다. 페이지에 사용되는 다른 컴포넌트에는 전달되지 않는다. 아래와 같이 수정해야 가능하다!

참고사항

'Link' 컴포넌트는 같은 Next.js 앱 내 두 개의 페이지에서 클라이언트-사이드 네비게이션을 가능하게 한다.

동적 라우팅

우리의 목표는 url를 깨끗하게 만드는 것이다. 먼저 동적 라우팅을 사용해 '/pages'의 동적인 경로를 처리해보자.

/post?title=Hello%20Next.js/p/hello-nextjs 이렇게 바꾸는 것이다!

라우트 마스킹은 Next.js의 특별한 기능이다. 앱에서 표시되는 실제 URL과 다른 URL이 브라우저에 표시된다.

as로 표시된 부분이 브라우저에 보여질 URL다. 놀라운 사실은 history를 인식하기 때문에 뒤로가기 앞으로가기가 가능하다는 것!

하지만 페이지를 이동 후 새로고침을 누르면 404 에러가 나온다. 왜냐하면 불러올 페이지가 없기 때문이다. 이를 해결하기 위해 커스컴 서버 API가 필요하다

express를 이용해 커스텀 서버 생성

일단 express를 설치한다.

npm install --save express

그리고 server.js 파일을 생성하고 다음과 같이 작성한다.

package.json도 수정!!

커스텀 라우트 생성하기!

express에서 라우팅을 할 때 어떠한 패턴의 url에 대해 필요한 페이지로 매칭하도록 설정한 것이다. "*"는 일반 경로다.

url 패턴이 /p/:id일 경우 '/post'페이지에 커스텀 라우트를 매핑한다.

------------ 404 에러가 났는데 해결하지 못해서 일단 중지하고 다음으로 ---------------

URL에 있는 정보

/post 페이지는 쿼리 문자열 파라미터 title을 통해 제목을 가져온다.

<Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>

클라이언트 사이드 라우팅에서는 Link의 as props를 통해 값을 전달할 수 있다.

하지만 서버 라우트에서는 URL에 있는 id만을 가지기 때문에 제목이 없다. 그래서 ID를 서버 사이드 쿼리 문자열 파라미터로 설정한다.

  server.get('p/:id', (req, res) => {
      console.log(req, res);
      const actualPage = '/post';
      const queryParams = { title: req.params.id };
      app.render(req, res, actualPage, queryParams);
    });

데이터를 가져오자

Next.js에는 데이터를 가지고 오는 표준 API가 있다. 비동기 함수인 getInitialProps를 사용하자!

먼저 서버와 클라이언트 모두 작동하는 isomorphic-unfetch 친구를 설치한다!

중요한 점은 getInitialProps는 return값이 있어야 한다는 것이고 Index 컴포넌트에 props로 데이터를 전달한다는 것이다.

데이터를 서버에서 가져오는 것인지, 클라이언트에서 가져오는 것인지가 중요하다.

이제 각 데이터들에 대한 정보를 뿌려주면 된다. id값 기준으로 page가 라우팅되니까

const queryParams = { id: req.params.id }; 키값을 바꿔준다!

이제 post.js에 가서 리스트를 클릭하면 각 리스트에 맞는 정보를 가져와야 하는데 문제가 있다. queryParams를 id값으로 바꿨기 때문에 router.query로 데이터를 받아오지 못한다.

즉, post 안에서 id값을 이용해서 fetch를 해야한다!!!!

getInitialProps로 fetch를 하는데 인자로 받아오는 값이 무엇인지 무척 궁금했다!! 알아보자!!

바로 바로 이 친구들. query.id를 통해 id를 가져온다.

이렇게 귀여운 routing이 완성된다.

참고 : https://brunch.co.kr/@hee072794/87

profile
프론트엔드 개발

0개의 댓글