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를 설치한다.
npm install --save express
그리고 server.js 파일을 생성하고 다음과 같이 작성한다.
package.json도 수정!!
express에서 라우팅을 할 때 어떠한 패턴의 url에 대해 필요한 페이지로 매칭하도록 설정한 것이다. "*"는 일반 경로다.
url 패턴이 /p/:id
일 경우 '/post'페이지에 커스텀 라우트를 매핑한다.
------------ 404 에러가 났는데 해결하지 못해서 일단 중지하고 다음으로 ---------------
/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이 완성된다.