Next App Router Recipe

Next.js App Router에서 Inkio를 붙일 때는 examples/next-app-router를 기준으로 시작하세요.

적합한 경우:

• Next.js App Router
• @inkio/extension까지 같이 쓰는 경우
• slash command, hashtag, wiki link, image upload 같은 확장 기능이 필요한 경우

실행:

pnpm install
pnpm --filter example-next-app-router dev

핵심 포인트:

• 에디터는 use client 컴포넌트 안에서 렌더링합니다.
• app/layout.tsx에서 @inkio/editor/minimal.css, @inkio/extension/style.css를 import합니다.
• next.config.mjs에서 @inkio/editor, @inkio/extension를 transpilePackages에 넣습니다.
• getDefaultCoreExtensions()에 필요한 extension만 서브패스로 조합하는 방식을 기준으로 사용합니다.
• full preset이 더 편하면 getDefaultInkioExtensions()도 쓸 수 있지만, bundle 크기가 중요하면 selective composition이 더 안전합니다.

주요 파일:

• examples/next-app-router/components/editor-demo.tsx
• examples/next-app-router/app/layout.tsx
• examples/next-app-router/next.config.mjs

AI에게 요청할 때는 AI_CONTEXT.md와 함께 examples/next-app-router/components/editor-demo.tsx를 기준으로 수정하라고 주는 방식이 좋습니다.