This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
마크다운 내 외부 URL을 카드 형태로 렌더링합니다. Open Graph 메타데이터를 서버에서 스크랩하여 제목, 설명, 이미지를 표시합니다.
1. 베어 URL (자동 감지)
URL만 단독으로 한 줄에 작성하면 자동으로 카드로 변환됩니다:
참고 자료입니다:
https://nextjs.org/docs/app
위 내용을 참고하세요.
[텍스트](url)형태의 인라인 링크는 항상 일반 텍스트 링크로 유지됩니다.
2. 링크 + 카드 렌더링: <!-- og -->
<!-- og -->
https://nextjs.org/docs/app원래 링크를 유지하고, 아래에 OG 카드를 추가로 표시합니다.
3. 카드만 렌더링: <!-- og-only -->
<!-- og-only -->
https://nextjs.org/docs/app원래 링크를 숨기고 OG 카드만 표시합니다.
4. 카드 렌더링 제외: <!-- no-og -->
<!-- no-og -->
https://example.com베어 URL이어도 카드 렌더링을 하지 않고 일반 링크로 표시합니다.