next-canvas

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

Usage

1import type { CanvasSrc } from "next-canvas";
2
3import Canvas from "next-canvas";
4
5const canvasSrc: CanvasSrc = [
6  {
7    left: 0,
8    top: 0,
9    width: 100,
10    height: 100,
11    children: (
12      <>
13        <h1>Item 1</h1>
14        <p>Item's content can be any React components.</p>
15      </>
16    ),
17  },
18  {
19    left: 200,
20    top: 200,
21    width: 200,
22    height: 200,
23    children: (
24      <>
25        <h1>Item 2</h1>
26        <p>Item's content are semantic HTML elements.</p>
27      </>
28    ),
29  },
30  ,
31];
32
33export default function Page() {
34  return <Canvas src={canvasSrc} />;
35}

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.