⛳️ 요구사항

<aside>

1. [수동] 프로젝트에서 sitemap 추출
2. [자동] build할때, 자동으로 sitemap.xml과 robots.txt 를 생성하기
3. Google Search 콘솔에 사이트맵 링크 등록 </aside>

👩‍💻 작업내용

1. [수동] 사이트맵 추출

• 사이트맵 추출 프로그램을 사용하여 sitemap.xml을 자동으로 생성

• Screaming Frog SEO Spider 프로그램 사용

  Screaming Frog SEO Spider Website Crawler

  다운로드 필요, 500페이지까지 무료

📄 추출된 사이트맵 내용 파악 및 수정

• 추출된 내용

  <url>
  	<loc><https://menabi.ai></loc>
  	<lastmod>2024-08-22T05:08:48.061Z</lastmod>
  	<changefreq>daily</changefreq>
  	<priority>1</priority>
  </url>
  ...
  

  

  Google Search 사이트맵에 대한 FAQs 내용 중

  • lastmod: 해당 화면 수정날짜, 중요하지 않음
  • changefreq: 페이지가 변경될 가능성이 있는 빈도, Google에서 값을 무시하므로 제외
  • priority: 링크 우선순위 (0.0 ~ 1.0), Google에서 값을 무시하므로 제외

• 최종 반영 내용 (검색엔진이 반영해야할 타겟 path들을 작성)

  <url>
  	<loc><https://menabi.ai></loc>
  	<lastmod>2024-08-22T05:08:48.061Z</lastmod>
  </url>
  ...
  

⚙️ 수정한 사이트맵을 Next.js에 적용하기

• app 디렉토리 root에 sitemap.xml을 생성하는 sitemap.ts 파일을 추가

• 위에서 수정한 sitemap 내용에 맞게 리턴값을 부여

  • app/[locale]/sitemap.ts

    import type { MetadataRoute } from 'next'
     
    export default function sitemap(): MetadataRoute.Sitemap {
      return [
        {
          url: '<https://menabi.ai>',
          lastModified: new Date(),
        },
        
       ... 검색엔진이 반영해야할 타겟 path들을 추가
      ]
    }
    

• ✅ middleware에서 로그인 여부, 국제화 경로 (ko/en/ja) 등이 관여되는지 체크

  • middleware.ts

    // 인증이 필요없는 path
    const publicPages = localePathConverter([
    	'/',
    	'/sign-in.*',
    	'/registration.*',
    	...
    	
    	'/sitemap.xml' //추가
    ])
    
    export default function middleware(req:NextRequest){
    	
    	if(req.nextUrl.pathname === '/sitempa.xml'){ //추가
    		return NextResponse.next()
    	}
    	
    	//로그인, 국제화 경로 조건문
    	if(isSignInPage){
    		return nextIntlMiddleware(req)
    	}
    	
    	...
    }
    

2. [자동] sitemap.xml & robot.txt 동시에 생성

• sitemap.xml 과 robot.txt 을 빌드할때마다 자동 생성

  1. next-sitemap 설치

     pnpm add next-sitemap
     

  2. Root 경로에 next-sitemap.config.js 설정 파일 생성

     module.exports = {
       siteUrl: process.env.SITE_URL || process.env.NEXTAUTH_URL,
       generateRobotsTxt: true, // robots.txt 파일도 생성
       sitemapSize: 7000, // 한 사이트맵 파일당 최대 URL 수
       outDir: './public', // 사이트맵이 저장될 디렉터리
     }
     

  3. build 스크립트 명령어 수정 (package.json)

     • build할때 sitemap.xml과 robot.txt 생성

       "scripts": {
       
       	 "build": "next build && pnpm next-sitemap",
       	 ...
       }
       

  4. build 후, 결과

     • 파일트리

       

     • robots.txt

       

     • sitemap.xml

       

     • sitemap-0.xml

       • ✅ 새로 만들어지는 경로를 감지하여 build시 자동으로 생성