Trying out Next.js url imports with Framer handshake feature
Published: 2022-03-08 10:22:00

At [elba](https://www.elba.security/), our core mission is to empower employees with the knowledge they need to mitigate cybersecurity risks.
For this we need to offer training content that is dynamic, various and engaging.

> When learning on elba you should be able to interact with the content at another level than if it was just a video or a quiz. For example when learning about choosing secure passwords, the UI would show you how long it would approximately take to brute-force your password, right as you are typing it. When learning about how to recognise a phishing email, you would be presented with an interactive email that you can click and hover around.

To achieve this result, using a LMS, a CMS or a rigid database structure as the source to generate the learning pages around a few front-end templates was out of the way.

And … we had another, important requirement : iterate fast to quickly release our MVP.

So how to achieve this ? Having to develop custom interactive React components for each training sounds like a lot of development work 😮

## Next.js url imports to the rescue !

As big fans of [Next.js](https://nextjs.org/) / [Vercel](https://vercel.com/), we were thrilled by Next.js 12 announcement and eager to try some of the new features !
It turned out one of them was perfect for our use case, [URL imports](https://nextjs.org/docs/api-reference/next.config.js/url-imports).

### Here is the flow :

1 - Our design team will design an interactive component in a tool like Framer, then use, in Framer's case, the [handshake](https://www.framer.com/docs/guides/handshake/) feature. In one click, handshake converts the component into a React component and serve it as an ES module on a CDN !


![Designing the component on Framer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyhxq5nxdm1i1i770sb3.png)
<figcaption align = "center"><b>Designing the component on Framer</b></figcaption>

![Configuring variables to make the component dynamic 🚀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrrg4ocsfugedrktjfjd.png)
<figcaption align = "center"><b>Configuring variables to make the component dynamic 😎</b></figcaption>
<br/>
2 - We import the component from the CDN URL into our React code.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr3wtf7iuh86s7dd0rwy.png)
 

## Notes 

- With handshake, a new URL will be generated for each version of the component
- When editing the URL in your code, make sure to run `next dev` which takes care of discovering new URL imports and regenerate your next lockfile.

## Conclusion

Thanks to URL imports we were able to produce highly engaging content without sacrificing too much time integrating components. This gives us a much shorter iteration loop. From this : 


![Long iteration loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ycwdc94hqosrrmc7fzl.png)

To this :

![Fast iteration loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmpptovhbzsi708e5lw0.png)

🚀🚀🚀

Here is the [repo](https://github.com/n2ctech/poc-framer) to the code for the POC we made with the email component. 

You can get started quickly with Next.js 12 and Framer by following the instructions [here](https://www.framer.com/docs/guides/handshake/).

Interested in joining an early stage startup backed by [eFounders](https://www.efounders.com/) in the cyber-security space ? Check-out our open positions bellow : 
- [Front-end software engineer](https://www.welcometothejungle.com/en/companies/efounders/jobs/frontend-software-engineer-elba_paris)
- [Full-stack software engineer](https://www.welcometothejungle.com/en/companies/efounders/jobs/fullstack-engineer-elba_paris)
- [Senior full-stack engineer](https://www.welcometothejungle.com/en/companies/efounders/jobs/senior-fullstack-engineer-elba_paris)