slides.md

theme	background	class	highlighter	lineNumbers	info	drawings	title
seriph	https://source.unsplash.com/collection/94734566/1920x1080	text-center	shiki	false	## Slidev Starter Template Presentation slides for developers.	persist	Next.js 12 URL Imports and Framer

Next.js 12 URL Imports

&

Framer

---

URL Imports

Next.js >= v12.0.0

URL imports are an experimental feature that allows you to import modules directly from external servers (instead of from the local disk).

To opt-in, add the allowed URL prefixes inside next.config.js:

module.exports = {
  experimental: {
    urlImports: ["https://example.com/modules/"],
  },
};

Then, you can import modules directly from URLs:

import { a, b, c } from "https://example.com/modules/some/module.js";

---

Let's see if it works

A new app, imports Vehicle Search Micro-app

// pages/index.js
import Vs from "http://127.0.0.1:8887/marketplace-vehicle-search-micro-app.esm.js";

export default function Home() {
  const router = useRouter();

  return (
    <Wrapper>
      <Vs basePath={"/"} router={router} />
      <p>ble</p>
    </Wrapper>
  );
}

---

// next.config.js
module.exports = {
  reactStrictMode: true,
  experimental: {
    urlImports: ["http://127.0.0.1:8887"],
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "styled-components": require.resolve(
        "./node_modules/styled-components/dist/styled-components.esm.js"
      ),
    };

    return config;
  },
  publicRuntimeConfig: {
    isStaging: true,
  },
};

vercel/next.js#31088

---

Well

We could maybe fix this, but it's clear at this point that this is not a production ready feature

https://github.com/oodlefinance/federated-modules-poc/tree/main/next-shell

---

Enter Framer

An awesome tool, with even cooler feature > Handshake

Get started: https://www.framer.com/docs/guides/handshake/

import Button from "https://framer.com/m/Button-Vuaa.js@6PVVpQlmjSnjigo6pxzB";

const Component = () => (
  <Button tap={() => console.log("pressed")} text="hello there" />
);

• Designer created component, which can be directly implemented
• Can use variables (props)
• You can create Components using Code inside Framer!