[Next.js] monorepo환경에서 next-seo, next-sitemap, robot 설정 | 사용하기

회사에서 monorepo로 프로젝트들을 작업하고 있는데,

그 중 한 프로젝트에 SEO를 위해 title, opengraph등 설정했던 내용들을 정리합니다.

 

1. next-seo 

공식문서 https://github.com/garmeeh/next-seo

1. 라이브러리 설치

yarn add next-seo

 

2. DefaultSeo 설정

seo.config.js

옵션이 꽤 많은데, 일단 설정이 필요한 부분만 적용했습니다.
더 많은 옵션은 링크에서 확인가능합니다 : )

// /apps/프로젝트/seo.config.js

export default {
  title: `{title}`,
  titleTemplate: '%s | `{부가설명}`', // %s에 각 페이지에서 설정한 title이 들어감  <NextSeo title="→이부분←" />
  canonical: `{canonical URL}`,
  description: `{description}`,
  openGraph: {
    type: 'website',
    locale: 'ko_KR',
    url: `{url}`,
    siteName: `{siteName}`,
    description: `{description}`,
    images: [
      {
        url: `{imgage URL}`,
        width: 800 // 이미지 width,
        height: 800 // 이미지 height,
        alt: `{imgage alt}`,
      },
    ],
  },
};

 

3. DefaultSeo 적용

 

_app.jsx

import SEO from '../../seo.config';

const App = () => {
  return (
    <AppProviders>
      <DefaultSeo {...SEO} />
      <Component />
    </AppProviders>
  );
};

 

 

 

2. next-sitemap

공식문서 https://www.npmjs.com/package/next-sitemap

1. 라이브러리 설치

yarn add next-sitemap

 

2. 옵션 설정

next-sitemap.config.js

robot.txt 파일도 추가가 필요해서 generateRobotsTxt값도 true로 주고,

404 페이지랑 마이페이지 부분은 로봇이 읽어가지 못하도록 따로 disallow처리 해주었습니다.

마찬가지로 더 자세한 옵션은 링크에서 확인 가능합니다!

// /apps/프로젝트/next-sitemap.config.js

module.exports = {
  siteUrl: `{사이트 URL}`,
  generateRobotsTxt: true, // robot.txt 파일 자동 생성 여부
  robotsTxtOptions: { // robot.txt 옵션 (필요시 작성)
    policies: [
      { userAgent: '*', allow: '/' }, // 접근 허용
      {
        userAgent: '*',
        disallow: ['/404', '/my'],  // 접근 비허용
      },
    ],
  },
};

 

3. 빌드 후 생성될 수 있도록 script추가

package.json의 script에 내용 추가

script: {
	.
    .
	"postbuild": "next-sitemap --config next-sitemap.config.js",
    .
    .
}

* monorepo에서의 문제점

build명령어 실행 후에 자동으로 실행되어야 하는 postbuild가 제대로 실행 되지 않않았습니다.

https://im-designloper.tistory.com/85 (post- 관련 내용)

package.json의 scripts의 활용 ( &&, pre-, post- )

build 후에 && 로 next-sitemap 명령어를 넣어야 잘 실행되어 사수분께 여쭈어보니

next에서 post-로 작성항 명령어는 제대로 작동 안하는것 같다고 하심..🥲🥹
그래서 저희는 젠킨스에서 build하는 명령어에  postbuild명령어를 실행할수 있도록 추가해 주었습니다..

 

 

4. 로컬에서 build 테스트시 git에 업로드 되지 않도록 .gitignore에 추가

.gitignore

# sitemap
sitemap*.xml
robots.txt

 

---

 

✔️ 참고

https://morioh.com/p/2f2dc991cc60

https://www.petroskyriakou.com/how-to-generate-a-nextjs-sitemap-inside-an-nx-monorepo