Feature Request Collecting votes

Feature Request: Support for Next.js and Other React Frameworks

Codux renders the client-side code of Next.js projects just like any other. However, frameworks like Next.js can contain server-side components for operations, which we cannot render. We are actively exploring ways to support server-side code. In the interim, we suggest the following workarounds:

Image Handling in Next.js 

To handle images, you could create a mock image component like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* eslint-disable @next/next/no-img-element */
import type { ImageProps } from 'next/image';
export default function FakeImage(props: ImageProps) {
  let src = '';
  if (typeof props.src === 'string') {
    src = props.src;
  } else if ('src' in props.src) {
    src = props.src.src;
  } else if ('default' in props.src) {
    src = props.src.default.src;
  }
  return (
    <img src={src} width={props.width} height={props.height} alt={props.alt} />
  );
}
Save the above code and then resolve the "next/image" path to the new mock image component in your configuration:
1
2
3
"resolve": {
  "next/image": "./_codux/mocks/MockImage"
}

Font Loading and Optimization 

Next.js offers server-side optimized font loading, which may not be compatible with Codux's client-side environment. If these server-side optimizations are used, the fonts may not load correctly in Codux.
To ensure that fonts load properly in Codux, we recommend manually loading the fonts. This can be done by including the font CSS in a CSS or SCSS file, and then importing this file using the boardGlobalSetup key in your project's global configuration to ensure that the font is available across all boards in Codux.

Vote for Additional Next.js Support 

If you are interested in seeing additional support added for Next.js, we encourage you to vote for it here.
IN THIS ARTICLE