Framework integrations

DevLink components are React-based and work with any modern React framework. This guide covers specific integration details for popular frameworks.

The minimum version of React supported to use DevLink is v16.18.0

Next.js

DevLink works with all Next.js apps whether you’re using the Pages Router or the App Router. The steps below will help you configure DevLink global styles and the <DevLinkProvider> which may be necessary for supporting components with Webflow interactions.

When using the Next.js App Router (Next.js 13+), you’ll need to:

  1. Import and set up the <DevLinkProvider> in your root layout file
  2. Import global styles from DevLink
1// app/layout.tsx
2import { DevLinkProvider } from '@/devlink/DevLinkProvider';
3import '@/devlink/global.css';
4
5export default function RootLayout({
6  children,
7}: {
8  children: React.ReactNode;
9}) {
10  return (
11    <html lang="en">
12      <body>
13        <DevLinkProvider>
14          {children}
15        </DevLinkProvider>
16      </body>
17    </html>
18  );
19}

The App Router uses React Server Components by default. While most DevLink components work as Client Components, you may need to add the "use client" directive at the top of your component files that use state or browser-specific APIs.

Some frameworks like Next.js provide their own Link and Image components for use in applications. You can choose to override DevLink’s builtin Link and Image components with the ones from Next.js by following the steps below.

First, create custom components that will wrap the Next.js Link and/or Image components:

renderers.tsx
1"use client";
2
3import Image from "next/image";
4import Link from "next/link";
5import { RenderLink, RenderImage } from "@/devlink";
6
7export const LinkRenderer: RenderLink = ({
8  href,
9  className,
10  children,
11  ...props,
12}) => (
13  <Link href={href} className={className} {...props}>
14    {children}
15  </Link>
16);
17
18export const ImageRenderer: RenderImage = ({
19  src,
20  alt,
21  height,
22  width,
23  loading,
24  className,
25  ...props,
26}) => {
27  const imgProps = {
28    loading,
29    className,
30    src: typeof src === "string" ? src : "",
31    alt: alt || "",
32    width: width === "auto" ? undefined : (width as number),
33    height: height === "auto" ? undefined : (height as number),
34    // Note: this will fill the image to its parent element container
35    // so you'll need to style the parent container with the desired size.
36    fill: width === "auto" || height === "auto",
37    ...props,
38  };
39
40  return <Image {...imgProps} />;
41};

For the Next.js Image component to work with external URLs, update next.config.js (more details on their official docs).

1// next.config.js
2const nextConfig = {
3  images: {
4    remotePatterns: [
5      {
6        protocol: "https",
7        hostname: "uploads-ssl.webflow.com",
8      },
9    ],
10  },
11};
12module.exports = nextConfig;

Finally, pass the custom components to the renderLink and/or renderImage props of the <DevLinkProvider> component that wraps your application at the root.

1// app/layout.tsx
2import "@/devlink/global.css";
3import { DevLinkProvider } from "@/devlink/DevLinkProvider";
4import { LinkRenderer, ImageRenderer } from "@/components/renderers"; // Custom components
5
6export default function RootLayout({
7  children,
8}: {
9  children: React.ReactNode;
10}) {
11  return (
12    <html lang="en">
13      <body>
14        <DevLinkProvider renderLink={LinkRenderer} renderImage={ImageRenderer}>
15          {children}
16        </DevLinkProvider>
17      </body>
18    </html>
19  );
20}

Remix

DevLink works with Remix, but requires some configuration due to its server-first approach.

1// app/root.tsx
2import { 
3  Links, 
4  LiveReload, 
5  Meta, 
6  Outlet, 
7  Scripts, 
8  ScrollRestoration 
9} from "@remix-run/react";
10import { DevLinkProvider } from '~/devlink/DevLinkProvider';
11import styles from '~/devlink/global.css';
12
13export const links = () => [
14  { rel: "stylesheet", href: styles }
15];
16
17export default function App() {
18  return (
19    <html lang="en">
20      <head>
21        <Meta />
22        <Links />
23      </head>
24      <body>
25        <DevLinkProvider>
26          <Outlet />
27        </DevLinkProvider>
28        <ScrollRestoration />
29        <Scripts />
30        <LiveReload />
31      </body>
32    </html>
33  );
34}

With Remix, import styles using the links export rather than importing the CSS file directly.

React Router

For applications using React Router (without Next.js or Remix), integrate DevLink as follows:

1// src/App.jsx
2import { BrowserRouter, Routes, Route } from 'react-router-dom';
3import { DevLinkProvider } from './devlink/DevLinkProvider';
4import './devlink/global.css';
5import Home from './pages/Home';
6import About from './pages/About';
7
8function App() {
9  return (
10    <BrowserRouter>
11      <DevLinkProvider>
12        <Routes>
13          <Route path="/" element={<Home />} />
14          <Route path="/about" element={<About />} />
15        </Routes>
16      </DevLinkProvider>
17    </BrowserRouter>
18  );
19}
20
21export default App;

Vite and Create React App

For React apps built with Vite, or Create React App projects, the integration is straightforward:

1// src/index.js
2import React from 'react';
3import ReactDOM from 'react-dom/client';
4import './index.css';
5import App from './App';
6import { DevLinkProvider } from './devlink/DevLinkProvider';
7import './devlink/global.css';
8
9const root = ReactDOM.createRoot(document.getElementById('root'));
10root.render(
11  <React.StrictMode>
12    <DevLinkProvider>
13      <App />
14    </DevLinkProvider>
15  </React.StrictMode>
16);

Gatsby

For Gatsby sites, wrap your application with the DevLinkProvider in your root layout component:

1// gatsby-browser.js
2import React from "react"
3import { DevLinkProvider } from "./src/devlink/DevLinkProvider"
4import "./src/devlink/global.css"
5
6export const wrapRootElement = ({ element }) => (
7  <DevLinkProvider>{element}</DevLinkProvider>
8)

Common integration patterns

Regardless of the framework you’re using, follow these patterns to successfully integrate DevLink:

Import paths

Ensure your import paths correctly resolve to your DevLink directory. Adjust import paths based on your project structure (for example, @/DevLink, ~/DevLink, or relative paths).

SSR compatibility

DevLink components are fully compatible with server-side rendering. Just make sure to wrap your application with DevLinkProvider at the root level.

Dedupe styles

Some frameworks may need configuration to prevent duplicate CSS imports. Use each framework’s recommended approach for CSS management.

Type support

DevLink generates type definitions for each Webflow component. Ensure your tsconfig.json includes the DevLink directory *.ts files.

Built with