The example should be a card that is designed in the studio, and a local project that is rendering products list.

Things that component should cover

• Some even handler prop
• Props for names, and description and amount
• A nested component to showcase the individual component isolation in module generation.

We need to share

• The esm modules that we pre-generated
• Anonymus project where the card is designed
• Link to the setup, in CodeSandbox

https://nextjs.org/docs/api-reference/next.config.js/url-imports

teleportHQ likes Next JS from it's inception, for the ease of deployments to the scalabbility. With Next 12, we have a new feature urlImports for loading modules from external CDN's. Which can completly eliminate the step of bundling and transpiling the JS modules. We can load a module from CDN and ready to use.

You can generate a unique custom link, by right clicking any component from the components list.

Screen Recording 2021-12-14 at 10.02.56 AM.mov

(Once the UI for Modal is finalised, show that too), the link is copied to your clipoard and you can use the link in your NextJS projects.

import Card from 'https://jscdn.teleporthq.io/new-project-68d4/card.js@be57bcf81f65fd2541ccd1a2e69a02b3e4c88a84'

const App = () => {
  
return (
		<div>
      <Card />
    </div>
  )
}

export default App

For setting up your projects to use components from teleportHQ. You can visit https://github.com/teleporthq/nextjs-http and use the template for starting new projects.

npx degit https://github.com/teleporthq/nextjs-http

Configuring existing projects

For configuring your existing NextJS applications you need NextJS version of 12 at minimum.

• Enable experimental feature for using CDN modules. Open your next.config.js. And add https://jscdn.teleporthq.io to your urlImports section. This tells NextJS to allow imports only from specific domains. This disables executing js from any unknown domains. Inscreases securtity. You can read more about it https://nextjs.org/docs/api-reference/next.config.js/url-imports#security-model

module.exports = {
  reactStrictMode: true,
  experimental: {
    urlImports: ['https://jscdn.teleporthq.io']
  }
}