Next.js 16으로 만든 무료 URL 슬러그 생성기 — 오픈 소스
요약
Next.js 16을 사용하여 개발된 오픈 소스 URL 슬러그 생성기입니다. 실시간 미리보기, 유니코드 음차, 사용자 정의 구분자 기능을 제공하며, 모든 처리가 클라이언트 사이드에서 이루어져 보안성이 높습니다.
핵심 포인트
- Next.js 16(App Router, Turbopack) 및 Tailwind CSS v4 기반의 최신 기술 스택 사용
- 유니코드 음차 및 단어 경계 인식을 통한 SEO 친화적인 슬러그 생성 기능
- 100% 클라이언트 사이드 동작으로 데이터 프라이버시 보장
- JSON-LD, 동적 OG 이미지, 다국어 사이트맵 등 강력한 SEO 기능 내장
- MIT 라이선스로 제공되는 오픈 소스 프로젝트
내 프로젝트를 위해 빠르게 사용할 수 있는 슬러그 생성기가 필요했지만, 빠르고 프라이빗하며 여러 언어를 지원하는 도구를 찾을 수 없었습니다. 그래서 직접 만들었습니다. 🔗 라이브 데모: sluggenerator.app 📦 GitHub: github.com/tangwei-creater/slug-generator
기능:
- 모든 텍스트를 깔끔하고 SEO 친화적인 URL 슬러그 (URL slug)로 변환
- 타이핑 시 실시간 미리보기
- 사용자 정의 구분자 (하이픈, 언더스코어, 점)
- 유니코드 음차 (Unicode transliteration) (ñ → n, ü → u)
- 단어 경계 (word-boundary)를 인식하는 최대 길이 제어
- 100% 클라이언트 사이드 (client-side) — 어떤 서버로도 데이터가 전송되지 않음
기술 스택:
- Next.js 16 (App Router + Turbopack)
- next-intl v4 (6개 언어: EN, JA, DE, ES, PT, FR)
- Tailwind CSS v4
- TypeScript
- Linux VPS + Cloudflare에 배포
SEO 기능 내장:
- JSON-LD 구조화 데이터 (WebApplication, FAQPage, BlogPosting)
- next/og를 통한 동적 OG 이미지
- 6개 로케일(locales) 모두를 위한 hreflang 교체 기능이 포함된 사이트맵 (Sitemap)
- 내부 링크가 포함된 5개의 SEO 블로그 포스트
MIT 라이선스로 제공됩니다. 피드백을 환영합니다!
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0