Next.js exportPathMap

생성일

Dec 15, 2021 07:43 AM

태그

Next.js

작성자

해결 완료

🔥 배경

직접 오류를 하나하나 해결하는 중에, 해당 코드를 발견하였다.

왜 이런 코드가 있는 것이고, 이것을 적용하면 무슨 장점이 있는 것일까?

⭐ 해결 방법

실제로 다음과 같이 공식문서에 적힌 대로 잘 적어보았다.


/** @type {import('next').NextConfig} */

module.exports = {
  images: {
    loader: 'imgix',
    path: '',
    domains: ['picsum.photos'],
  },
  reactStrictMode: true,
  exportPathMap: () => ({
	  '/login': { page: '/login' },
	  '/owner/success': { page: '/owner/success' },
	  '/register/success': { page: '/register/success' },
	  '/register': { page: '/register' },
	  '/': { page: '/' },
	  '/history/events': { page: '/history/events' },
	  '/history/reviews': { page: '/history/reviews' },
	  '/likes/event': { page: '/likes/event' },
	  '/likes/shop': { page: '/likes/shop' },
	  '/owner/change': { page: '/owner/change' },
	  '/profile/edit': { page: '/profile/edit' },
  }),
};

이후 다음과 같이 설정을 해준다.


yarn deploy
firebase deploy

결과

실제로 제대로 동작하지 않았다.

동적 파라미터로 처리해주던 부분은 모두 다 처리가 되지 않았는데, 그 이유는, pathMap으로 설정을 해주면 아무래도 전체 페이지들에 대한 getServerSideProps를 다 설정해줘야 하는 듯하다.

그도 그럴 듯한 게, 하나의 Export할 때의 Map을 설정해주는 건데, 우리가 멋대로 커스터마이징을 한다면 자동으로 이를 처리해주던 (getStaticProps, getServerSideProps) 이점이 사라진다.

💡

따라서, 이를 지금까지는 완벽하게 다루지는 못할 것 같으니, 따로 건드리지 않겠다.

Next.js exportPathMap

🔥 배경

⭐ 해결 방법

결과

👏🏻 참고자료