Next.JS Next-Sitemap

Google Search Console

https://search.google.com/search-console

해당 사이트에서 구글 검색결과에 나의 사이트를 노출되게 할 수 있다.

그래서 요구되는 것이 sitemap이다. 따라서 검색을 해본결과 직접 sitemap을 만들어 robots.txt에 등록 할 수 있지만 자동으로 해주는 패키지가 있다고 한다.

Next-Sitemap

Sitemap generator for next.js. Latest version: 4.2.3, last published: 2 months ago. Start using next-sitemap in your project by running `npm i next-sitemap`. There are 29 other projects in the npm registry using next-sitemap.

https://www.npmjs.com/package/next-sitemap

구글링을 통해 알게되었다.

해당 pakage를 이용하면 손쉽게 sitemap이 만들어진다고 한다.

다양한 옵션을 줄 수 있고 동적 사이트맵도 제작 가능하다고 한다.

이번에는 간단하게 정적사이트맵만 제작해 보았다.

Install


//패키지 설치
npm i next-sitemap -D

Create config file (next-sitemap.config.js)


/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com', //내 사이트 주소
  generateRobotsTxt: true, // (optional)
}

파일이름은 지정되어있지만 custom-config-file도 제작 가능하다.

Package.json에 추가


"scripts": {
    "dev": "next dev",
    "build": "next build",
		//custom-config-file일 시 "next-sitemap --config awesome.config.js" 이걸로
    "sitemap": "next-sitemap",

    "start": "next start",
    "lint": "next lint"
  },

create sitemap


npm run sitemap

> first@0.1.0 sitemap
> next-sitemap

✨ [next-sitemap] Loading next-sitemap config: file:///C:/Users/Bobong/Documents/GitHub/Next.js-Front-end/next-sitemap.config.js
✅ [next-sitemap] Generation completed
┌───────────────┬────────┐
│    (index)    │ Values │
├───────────────┼────────┤
│ indexSitemaps │   1    │
│   sitemaps    │   1    │
└───────────────┴────────┘
-----------------------------------------------------
 SITEMAP INDICES
-----------------------------------------------------

   ○ https://bobong.blog/sitemap.xml


-----------------------------------------------------
 SITEMAPS
-----------------------------------------------------

   ○ https://bobong.blog/sitemap-0.xml

참고로 sitemap 생성 전에 꼭 build를 진행한 뒤 실행시켜주자!

아래와 같이 생성되었다.

sitemap-0.xml


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://bobong.blog</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://bobong.blog/about-me</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://bobong.blog/posts</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://bobong.blog/projects</loc><lastmod>2023-11-13T05:47:28.795Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>

잘 생성된 것을 볼 수 있다.

조아써!