This is a Next.js Template project bootstrapped with create-next-app
adding the needle-engine
web component.
This project is a minimal example of adding needle-engine
to a nextjs project
needle.config.json
Added thebaseUrl
config to./assets
to change codegen (src/generated/gen
) to point to the next.js local server relative urlnext.config.js
Include the nextjs plugin which handlestranspilePackages
, webpackdefines
and licensing- tsconfig.json set decorators to true by adding
"experimentalDecorators": true
src/needleEngine.tsx
This is a simple next component for including theneedle-engine
web component. make sure to also add the type declarations fromsrc/declarations.d.ts
src/pages/index.tsx
Import the component to run client-side:const NeedleEngine = dynamic(() => import('../needleEngine'), { ssr: false })
- Q: My web project has no files in the
dist
output directory (see question in needle discord)
A: Addoutput: 'export'
to you next.config.js (see nextjs documentation)
To learn more about Needle Engine & Next.js, take a look at the following resources:
- Learn Needle Engine
- 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.