This is a Next.js Template project bootstrapped with create-next-app adding the needle-engine web component.

Needle Engine

This project is a minimal example of adding needle-engine to a nextjs project

• needle.config.json
  Added the baseUrl config to ./assets to change codegen (src/generated/gen) to point to the next.js local server relative url
• next.config.js
  Include the nextjs plugin which handles transpilePackages, webpack defines and licensing
• tsconfig.json set decorators to true by adding "experimentalDecorators": true
• src/needleEngine.tsx
  This is a simple next component for including the needle-engine web component. make sure to also add the type declarations from src/declarations.d.ts
• src/pages/index.tsx
  Import the component to run client-side:

  const NeedleEngine = dynamic(() => import('../needleEngine'), { ssr: false })

FAQ

• Q: My web project has no files in the dist output directory (see question in needle discord)
  A: Add output: 'export' to you next.config.js (see nextjs documentation)

Learn More

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.

Deployment

This template is set-up to deploy to Needle Cloud via Github Actions.

Check out our Needle Engine deployment documentation for more details.