next/dynamic as a component

[y-nk]

Goals

Have a component version of this, mainly for fitting into other frameworks such as react-router-dom. The use-case is to achieve this:

"use client";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import dynamic from "next/dynamic";

const Page1 = dynamic(() => import("./_pages/Page1"), { ssr: false });

const router = createBrowserRouter([
  {
    id: "page1",
    path: "/",
    element: <Page1 />,
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

like that:

"use client";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import { Dynamic } from "next/dynamic";

const router = createBrowserRouter([
  {
    id: "page1",
    path: "/",
    element: <Dynamic loader={() => import("./_pages/Page1")} ssr={false} />,
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

I believe probably other frameworks/libraries would enjoy this as well as it makes a smoother integration

Non-Goals

1. replace next/dynamic

Background

There's no known alternatives, but i can't be sure.

Proposal

import dynamic, { Loader, DynamicOptions } from "next/dynamic";

type DynamicProps<T> = {
  loader: Loader<T>;
} & DynamicOptions<T>;

export default function Dynamic<T>(props: DynamicProps<T>) {
  const { loader, ...options } = props;
  const Component = dynamic(loader, options); // currently fails because Next complains that the `loader` should be an inline function
  return <Component />;
}