next-canvas

Canvas for Next.js: SSR optimized, SEO friendly, & high performance.

Usage

import type { CanvasSrc } from "next-canvas";

import Canvas from "next-canvas";

const canvasSrc: CanvasSrc = [
  {
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    children: (
      <>
        <h1>Item 1</h1>
        <p>Item's content can be any React components.</p>
      </>
    ),
  },
  {
    left: 200,
    top: 200,
    width: 200,
    height: 200,
    children: (
      <>
        <h1>Item 2</h1>
        <p>Item's content are semantic HTML elements.</p>
      </>
    ),
  },
  ,
];

export default function Page() {
  return <Canvas src={canvasSrc} />;
}

Features

Like HTML5 canvas. Declarative & responsive. SEO friendly.

• Items are rendered as if they're in a HTML5 <canvas>.

• Items are declarative React components instead of being drawn imperatively.

• Items are responsive HTML elements & SEO friendly, just like any traditional websites.

• The first item is automatically focused & rendered into the center of viewport. No flash. No JavaScript required.

• Zero dependencies.