用)
在 Next.js 中集成 tldraw SDK基于官方模板從零搭建無限畫布應(yīng)用【免費(fèi)下載鏈接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/tl/tldraw導(dǎo)讀本指南以官方 Next.js 模板 為核心講解如何把 tldraw SDK 集成進(jìn) Next.js 應(yīng)用從安裝依賴、啟動開發(fā)服務(wù)器到理解Tldraw組件的掛載方式與相關(guān)配置文件的底層作用。讀完本文你將能夠基于 App Router 架構(gòu)快速搭建一個全屏可用的畫布應(yīng)用并掌握在生產(chǎn)構(gòu)建、TypeScript 與樣式加載等環(huán)節(jié)中需要注意的關(guān)鍵配置。模板定位一個最小可運(yùn)行的 tldraw Next.js 起點(diǎn)倉庫根目錄下的templates/目錄維護(hù)了多套官方腳手架nextjs模板正是其中為 Next.js 框架量身定制的一套它把 tldraw SDK 與 Next.js 的 App Router 目錄結(jié)構(gòu)整合在一起開箱即用。模板的真實(shí)文件結(jié)構(gòu)如下templates/nextjs/ ├── LICENSE.md # 模板自身的 MIT 許可 ├── README.md # 使用說明本指南依據(jù)的文檔 ├── next.config.mjs # Next.js 配置 ├── package.json # 依賴與腳本 ├── tsconfig.json # TypeScript 配置 └── src/ └── app/ ├── favicon.ico ├── globals.css # 全局樣式引入 tldraw 的樣式文件 ├── layout.tsx # 根布局輸出頁面 metadata └── page.tsx # 首頁掛載 Tldraw / 組件模板的核心目標(biāo)是展示“在 Next.js 中使用 tldraw 的最小正確姿勢”一個page.tsx、一個根布局、一個全局樣式文件外加三條 npm scripts。所有其他能力持久化、多人協(xié)作、自定義 UI都建立在這套骨架之上。本地開發(fā)三步跑起來README 明確給出了本地開發(fā)的完整流程這是從零開始的第一步共三步安裝依賴使用yarn或npm install項(xiàng)目包管理器可二選一package.json 中聲明了全部依賴。啟動開發(fā)服務(wù)器運(yùn)行yarn dev或npm run dev。打開瀏覽器訪問http://localhost:3000/即可看到全屏畫布應(yīng)用。在 monorepo 場景下開發(fā)者通常從倉庫根目錄執(zhí)行yarn dev配合lerna.json與根 package.json 的工作區(qū)機(jī)制模板內(nèi)的腳本定義如下scripts: { dev: next dev -H 0.0.0.0, build: next build, start: next start, lint: yarn run -T tsx ../../internal/scripts/lint.ts }幾個值得注意的細(xì)節(jié)dev腳本帶有-H 0.0.0.0允許通過局域網(wǎng) IP 訪問開發(fā)服務(wù)器便于在容器或遠(yuǎn)程環(huán)境中調(diào)試lint復(fù)用了倉庫根目錄internal/scripts/lint.ts的統(tǒng)一 lint 流程而不是在模板內(nèi)單獨(dú)配置 lintbuild/start分別是生產(chǎn)構(gòu)建與生產(chǎn)啟動命令與next dev形成完整閉環(huán)。核心代碼拆解畫布是如何掛載的1. 頁面組件三行代碼渲染畫布模板的首頁位于 page.tsx全文如下use client import { Tldraw } from tldraw export default function Home() { return ( main div style{{ position: fixed, inset: 0 }} Tldraw / /div /main ) }這里有兩個關(guān)鍵點(diǎn)use client指令由于Tldraw組件依賴瀏覽器 API如 Pointer Events、IndexedDB 等在 Next.js App Router 中必須顯式聲明為客戶端組件否則服務(wù)端渲染階段會報錯。這是模板中最重要的集成要點(diǎn)。position: fixed; inset: 0將外層容器固定并撐滿整個視口使畫布獲得全屏的交互區(qū)域。Tldraw組件會創(chuàng)建自己的編輯器實(shí)例與無限畫布坐標(biāo)系無需任何其他 props 即可獲得完整功能選擇、繪制、標(biāo)注、導(dǎo)出等。2. 根布局注入全局樣式與 metadatalayout.tsx 定義了根布局導(dǎo)入全局樣式并輸出頁面元信息import ./globals.css export const metadata { title: tldraw Next.js app template, description: An example of how to use tldraw in a Next.js app, }值得注意的是模板沒有引入任何 UI 庫或字體渲染框架metadata也保持極簡把渲染空間完全交給 tldraw。3. 全局樣式必須引入 tldraw.cssglobals.css 是讓畫布“看起來正?！钡年P(guān)鍵import url(https://fonts.googleapis.com/css2?familyInter:wght500;700displayswap); import url(tldraw/tldraw.css); body { font-family: Inter; overscroll-behavior: none; }import url(tldraw/tldraw.css)通過包名直接引入 tldraw 打包產(chǎn)出的樣式文件。該文件由 packages/tldraw 的構(gòu)建腳本scripts/copy-css-files.mjs拷貝生成并被列入包的files字段隨 npm 包一起發(fā)布o(jì)verscroll-behavior: none禁用瀏覽器在畫布邊緣的滾動鏈?zhǔn)交貜棻苊馔蟿赢嫴紩r觸發(fā)整頁滾動——這是所有嵌入類畫布應(yīng)用的通用最佳實(shí)踐模板選用 Inter 字體并聲明了500/700兩個字重以滿足工具面板的文字渲染需求。4. Next.js 配置將 tldraw 標(biāo)記為服務(wù)端外部包next.config.mjs 中有一項(xiàng)容易被忽視但至關(guān)重要的配置/** type {import(next).NextConfig} */ const nextConfig { serverExternalPackages: [tldraw/tldraw], } export default nextConfigserverExternalPackages告訴 Next.js 不要把tldraw/tldraw打進(jìn)服務(wù)端 bundle而是作為外部包在運(yùn)行時解析。tldraw 內(nèi)部依賴瀏覽器全局對象與第三方庫如idb、lz-string、tiptap/*此配置可以有效規(guī)避服務(wù)端打包時的兼容性問題確保use client組件在客戶端正確加載。5. TypeScript 配置路徑別名與項(xiàng)目引用tsconfig.json 采用 Next.js 標(biāo)準(zhǔn)配置其中有兩點(diǎn)與 tldraw 相關(guān)paths定義/*指向./src/*方便業(yè)務(wù)代碼使用短路徑導(dǎo)入references指向../../packages/tldraw讓模板在 monorepo 中直接引用 tldraw 源碼包package.json中tldraw: workspace:*與之對應(yīng)這是模板能夠跟隨 SDK 主分支實(shí)時迭代的前提。底層原理Tldraw組件從何而來模板只引入了Tldraw這一個組件但它背后是完整的 SDK 導(dǎo)出體系。packages/tldraw/src/index.ts 中的導(dǎo)出語句說明了組件來源export { Tldraw, type TLComponents, type TldrawBaseProps, type TldrawProps } from ./lib/Tldraw該文件同時通過export * from tldraw/editorindex.ts透傳了編輯器層能力并從 packages/editor含tldraw/state、tldraw/store、tldraw/tlschema等核心包逐層構(gòu)建出完整 SDK。從依賴聲明看packages/tldraw/package.json 的 peerDependencies 要求react/react-dom版本為^18.2.0 || ^19.2.1而模板固定使用 React 19 與 Next.js 16版本組合是官方驗(yàn)證過的。需要特別說明Tldraw /不帶任何 props 時提供的是完整的編輯器 默認(rèn) UI工具欄、樣式面板、菜單等。SDK 還導(dǎo)出TldrawImageindex.ts等組件以及大量可替換的 UI 部件DefaultToolbar、DefaultMainMenu等模板的“零配置可用”正是這套默認(rèn)裝配的體現(xiàn)。生產(chǎn)構(gòu)建與部署完成yarn dev本地驗(yàn)證后生產(chǎn)環(huán)境流程為yarn build # 產(chǎn)出 .next 靜態(tài)構(gòu)建產(chǎn)物 yarn start # 以生產(chǎn)模式啟動服務(wù)由于畫布狀態(tài)默認(rèn)保存在瀏覽器本地tldraw 自帶基于 IndexedDB 的持久化該模板無需后端即可作為一個完整的單機(jī)白板應(yīng)用部署到任意支持 Node.js 的平臺。如果需要多人實(shí)時協(xié)作或云端存儲可以在此基礎(chǔ)上接入倉庫中的 sync、sync-core 等協(xié)作包或參考apps/dotcom的生產(chǎn)級實(shí)現(xiàn)。許可與使用邊界模板自身采用 MIT 許可見 templates/nextjs/LICENSE.md而 tldraw SDK 采用其獨(dú)立的商業(yè)許可二者是分離的MIT 許可只覆蓋模板腳手架代碼不覆蓋 SDK 本體。倉庫根目錄的 LICENSE.md 與 TRADEMARKS.md 分別說明了 SDK 的許可條款與 tldraw 名稱、Logo 的商標(biāo)使用規(guī)范商用前務(wù)必閱讀確認(rèn)。小結(jié)官方 Next.js 模板用最精簡的文件證明了 tldraw 與 Next.js 的集成路徑一個use client頁面掛載Tldraw /、一份引入tldraw/tldraw.css的全局樣式、一條serverExternalPackages配置再加上dev/build/start三條腳本即可完成從本地開發(fā)到生產(chǎn)部署的完整閉環(huán)。以這套骨架為起點(diǎn)你可以繼續(xù)借助 packages/tldraw/src/index.ts 中導(dǎo)出的編輯器 API 與 UI 覆蓋機(jī)制逐步定制屬于自己的無限畫布應(yīng)用?！久赓M(fèi)下載鏈接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/tl/tldraw創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 在 Next.js 中集成 tldraw SDK：基于官方模板從零搭建無限畫布應(yīng)用
在 Next.js 中集成 tldraw SDK基于官方模板從零搭建無限畫布應(yīng)用【免費(fèi)下載鏈接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/tl/tldraw導(dǎo)讀本指南以官方 Next.js 模板 為核心講解如何把 tldraw SDK 集成進(jìn) Next.js 應(yīng)用從安裝依賴、啟動開發(fā)服務(wù)器到理解Tldraw組件的掛載方式與相關(guān)配置文件的底層作用。讀完本文你將能夠基于 App Router 架構(gòu)快速搭建一個全屏可用的畫布應(yīng)用并掌握在生產(chǎn)構(gòu)建、TypeScript 與樣式加載等環(huán)節(jié)中需要注意的關(guān)鍵配置。模板定位一個最小可運(yùn)行的 tldraw Next.js 起點(diǎn)倉庫根目錄下的templates/目錄維護(hù)了多套官方腳手架nextjs模板正是其中為 Next.js 框架量身定制的一套它把 tldraw SDK 與 Next.js 的 App Router 目錄結(jié)構(gòu)整合在一起開箱即用。模板的真實(shí)文件結(jié)構(gòu)如下templates/nextjs/ ├── LICENSE.md # 模板自身的 MIT 許可 ├── README.md # 使用說明本指南依據(jù)的文檔 ├── next.config.mjs # Next.js 配置 ├── package.json # 依賴與腳本 ├── tsconfig.json # TypeScript 配置 └── src/ └── app/ ├── favicon.ico ├── globals.css # 全局樣式引入 tldraw 的樣式文件 ├── layout.tsx # 根布局輸出頁面 metadata └── page.tsx # 首頁掛載 Tldraw / 組件模板的核心目標(biāo)是展示“在 Next.js 中使用 tldraw 的最小正確姿勢”一個page.tsx、一個根布局、一個全局樣式文件外加三條 npm scripts。所有其他能力持久化、多人協(xié)作、自定義 UI都建立在這套骨架之上。本地開發(fā)三步跑起來README 明確給出了本地開發(fā)的完整流程這是從零開始的第一步共三步安裝依賴使用yarn或npm install項(xiàng)目包管理器可二選一package.json 中聲明了全部依賴。啟動開發(fā)服務(wù)器運(yùn)行yarn dev或npm run dev。打開瀏覽器訪問http://localhost:3000/即可看到全屏畫布應(yīng)用。在 monorepo 場景下開發(fā)者通常從倉庫根目錄執(zhí)行yarn dev配合lerna.json與根 package.json 的工作區(qū)機(jī)制模板內(nèi)的腳本定義如下scripts: { dev: next dev -H 0.0.0.0, build: next build, start: next start, lint: yarn run -T tsx ../../internal/scripts/lint.ts }幾個值得注意的細(xì)節(jié)dev腳本帶有-H 0.0.0.0允許通過局域網(wǎng) IP 訪問開發(fā)服務(wù)器便于在容器或遠(yuǎn)程環(huán)境中調(diào)試lint復(fù)用了倉庫根目錄internal/scripts/lint.ts的統(tǒng)一 lint 流程而不是在模板內(nèi)單獨(dú)配置 lintbuild/start分別是生產(chǎn)構(gòu)建與生產(chǎn)啟動命令與next dev形成完整閉環(huán)。核心代碼拆解畫布是如何掛載的1. 頁面組件三行代碼渲染畫布模板的首頁位于 page.tsx全文如下use client import { Tldraw } from tldraw export default function Home() { return ( main div style{{ position: fixed, inset: 0 }} Tldraw / /div /main ) }這里有兩個關(guān)鍵點(diǎn)use client指令由于Tldraw組件依賴瀏覽器 API如 Pointer Events、IndexedDB 等在 Next.js App Router 中必須顯式聲明為客戶端組件否則服務(wù)端渲染階段會報錯。這是模板中最重要的集成要點(diǎn)。position: fixed; inset: 0將外層容器固定并撐滿整個視口使畫布獲得全屏的交互區(qū)域。Tldraw組件會創(chuàng)建自己的編輯器實(shí)例與無限畫布坐標(biāo)系無需任何其他 props 即可獲得完整功能選擇、繪制、標(biāo)注、導(dǎo)出等。2. 根布局注入全局樣式與 metadatalayout.tsx 定義了根布局導(dǎo)入全局樣式并輸出頁面元信息import ./globals.css export const metadata { title: tldraw Next.js app template, description: An example of how to use tldraw in a Next.js app, }值得注意的是模板沒有引入任何 UI 庫或字體渲染框架metadata也保持極簡把渲染空間完全交給 tldraw。3. 全局樣式必須引入 tldraw.cssglobals.css 是讓畫布“看起來正?！钡年P(guān)鍵import url(https://fonts.googleapis.com/css2?familyInter:wght500;700displayswap); import url(tldraw/tldraw.css); body { font-family: Inter; overscroll-behavior: none; }import url(tldraw/tldraw.css)通過包名直接引入 tldraw 打包產(chǎn)出的樣式文件。該文件由 packages/tldraw 的構(gòu)建腳本scripts/copy-css-files.mjs拷貝生成并被列入包的files字段隨 npm 包一起發(fā)布o(jì)verscroll-behavior: none禁用瀏覽器在畫布邊緣的滾動鏈?zhǔn)交貜棻苊馔蟿赢嫴紩r觸發(fā)整頁滾動——這是所有嵌入類畫布應(yīng)用的通用最佳實(shí)踐模板選用 Inter 字體并聲明了500/700兩個字重以滿足工具面板的文字渲染需求。4. Next.js 配置將 tldraw 標(biāo)記為服務(wù)端外部包next.config.mjs 中有一項(xiàng)容易被忽視但至關(guān)重要的配置/** type {import(next).NextConfig} */ const nextConfig { serverExternalPackages: [tldraw/tldraw], } export default nextConfigserverExternalPackages告訴 Next.js 不要把tldraw/tldraw打進(jìn)服務(wù)端 bundle而是作為外部包在運(yùn)行時解析。tldraw 內(nèi)部依賴瀏覽器全局對象與第三方庫如idb、lz-string、tiptap/*此配置可以有效規(guī)避服務(wù)端打包時的兼容性問題確保use client組件在客戶端正確加載。5. TypeScript 配置路徑別名與項(xiàng)目引用tsconfig.json 采用 Next.js 標(biāo)準(zhǔn)配置其中有兩點(diǎn)與 tldraw 相關(guān)paths定義/*指向./src/*方便業(yè)務(wù)代碼使用短路徑導(dǎo)入references指向../../packages/tldraw讓模板在 monorepo 中直接引用 tldraw 源碼包package.json中tldraw: workspace:*與之對應(yīng)這是模板能夠跟隨 SDK 主分支實(shí)時迭代的前提。底層原理Tldraw組件從何而來模板只引入了Tldraw這一個組件但它背后是完整的 SDK 導(dǎo)出體系。packages/tldraw/src/index.ts 中的導(dǎo)出語句說明了組件來源export { Tldraw, type TLComponents, type TldrawBaseProps, type TldrawProps } from ./lib/Tldraw該文件同時通過export * from tldraw/editorindex.ts透傳了編輯器層能力并從 packages/editor含tldraw/state、tldraw/store、tldraw/tlschema等核心包逐層構(gòu)建出完整 SDK。從依賴聲明看packages/tldraw/package.json 的 peerDependencies 要求react/react-dom版本為^18.2.0 || ^19.2.1而模板固定使用 React 19 與 Next.js 16版本組合是官方驗(yàn)證過的。需要特別說明Tldraw /不帶任何 props 時提供的是完整的編輯器 默認(rèn) UI工具欄、樣式面板、菜單等。SDK 還導(dǎo)出TldrawImageindex.ts等組件以及大量可替換的 UI 部件DefaultToolbar、DefaultMainMenu等模板的“零配置可用”正是這套默認(rèn)裝配的體現(xiàn)。生產(chǎn)構(gòu)建與部署完成yarn dev本地驗(yàn)證后生產(chǎn)環(huán)境流程為yarn build # 產(chǎn)出 .next 靜態(tài)構(gòu)建產(chǎn)物 yarn start # 以生產(chǎn)模式啟動服務(wù)由于畫布狀態(tài)默認(rèn)保存在瀏覽器本地tldraw 自帶基于 IndexedDB 的持久化該模板無需后端即可作為一個完整的單機(jī)白板應(yīng)用部署到任意支持 Node.js 的平臺。如果需要多人實(shí)時協(xié)作或云端存儲可以在此基礎(chǔ)上接入倉庫中的 sync、sync-core 等協(xié)作包或參考apps/dotcom的生產(chǎn)級實(shí)現(xiàn)。許可與使用邊界模板自身采用 MIT 許可見 templates/nextjs/LICENSE.md而 tldraw SDK 采用其獨(dú)立的商業(yè)許可二者是分離的MIT 許可只覆蓋模板腳手架代碼不覆蓋 SDK 本體。倉庫根目錄的 LICENSE.md 與 TRADEMARKS.md 分別說明了 SDK 的許可條款與 tldraw 名稱、Logo 的商標(biāo)使用規(guī)范商用前務(wù)必閱讀確認(rèn)。小結(jié)官方 Next.js 模板用最精簡的文件證明了 tldraw 與 Next.js 的集成路徑一個use client頁面掛載Tldraw /、一份引入tldraw/tldraw.css的全局樣式、一條serverExternalPackages配置再加上dev/build/start三條腳本即可完成從本地開發(fā)到生產(chǎn)部署的完整閉環(huán)。以這套骨架為起點(diǎn)你可以繼續(xù)借助 packages/tldraw/src/index.ts 中導(dǎo)出的編輯器 API 與 UI 覆蓋機(jī)制逐步定制屬于自己的無限畫布應(yīng)用?！久赓M(fèi)下載鏈接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/tl/tldraw創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考