Next.js에서 “Legal Mentions” 하드코딩을 멈추세요 🇪🇺 (Open Source Component)
Source: Dev.to

SaaS 구축의 “지루한” 부분
우리는 모두 제품을 만드는 것을 좋아합니다—대시보드, Stripe 연동, 애니메이션 등.
하지만 유럽(특히 프랑스, 영국, 스위스)에서 회사를 시작하려면 출시 직전 compliance(규정 준수)라는 벽에 부딪히게 됩니다.
법적으로 Legal Mentions(Mentions Légales) 모달을 제공해야 하는데, 여기에는 다음이 표시되어야 합니다:
- 회사 고유 번호(SIRET / VAT / CRN)
- 호스팅 제공자 정보(주소 + 연락처)
- 지적 재산권 면책 조항
대부분의 개발자는 이를 컴포넌트나 정적 페이지에 하드코딩합니다. 사무실이 이전하거나 호스팅이 바뀔 때마다 코드를 찾아 수정해야 합니다.
해결책: 데이터 기반 컴플라이언스
파리와 런던에서 클라이언트마다 이 작업을 반복하는 데 지쳤습니다. 그래서 간단한 JSON 파일에서 법적 텍스트를 가져오는 재사용 가능한 Next.js 컴포넌트로 추출했습니다. 오픈소스이며, 오늘 바로 사용할 수 있습니다.
데이터 구조 (legal-data.json)
{
"company": {
"trade_name": "MY STARTUP",
"legal_name": "My Startup Ltd",
"siret": "993 637 xxx",
"vat_number": "FR XX 993 637 750",
"address": "59 rue de Ponthieu, 75008 Paris",
"contact_email": "hello@mystartup.com"
},
"hosting": {
"provider": "Vercel Inc.",
"address": "340 S Lemon Ave, Walnut, CA 91789, USA"
},
"translations": {
"en": { "publisher": "Website Publisher", "hosting": "Hosting Provider" },
"fr": { "publisher": "Éditeur du Site", "hosting": "Hébergeur" }
}
}
컴포넌트
이 컴포넌트는 위 데이터를 그대로 사용합니다. SIRET 번호를 읽기 쉽게 포맷하는 등 지루한 포맷팅 작업을 자동으로 처리해 주므로 직접 할 필요가 없습니다.
특징
- ✅ 의존성 제로: 무거운 라이브러리 없이 React/Next.js만 사용.
- ✅ 다국어 지원: EN/FR/RU 구조를 즉시 지원.
- ✅ EU 규정 준수: 프랑스/영국 규정(Loi LCEN)에 맞게 포맷.
코드 받기
보일러플레이트를 GitHub에 오픈소스로 공개했습니다. 포크하거나 스타를 찍거나 다음 프리랜스 프로젝트에 활용해 보세요.
GitHub Repo: nextjs-legal-mentions-boilerplate
왜 만들었나요?
저는 글로벌 창업자(런던, 취리히, 파리의 국제 기업가)들이 기술 스택을 빠르게 출시하도록 돕습니다. 사업을 시작할 때는 고객에게 집중해야지, 푸터에 VAT 번호를 포맷하는 데 시간을 낭비하면 안 됩니다.
- 이 스니펫이 마음에 든다면 레포에 ⭐를 눌러 주세요!
- 새로운 회사를 위한 전체 기술 설정이 필요하신가요? https://www.reklamof.xyz/ 를 확인해 보세요.