cxf-codegen

Plasmic + CXF integration library for Next.js projects. Provides API call components, server-side rendering helpers, and authentication utilities.

Installation

npm install cxf-codegen

Setup

Your project needs thin wrapper files that import from this library. The create-plasmic-app CLI generates these automatically, but you can also create them manually:

pages/_app.tsx

import "cxf-codegen/register";
export { default } from "cxf-codegen/pages/app";

pages/api/[...path].ts

export { default } from "cxf-codegen/pages/api/cxf";

pages/api/assets/[...path].ts

export { default } from "cxf-codegen/pages/api/assets";

pages/plasmic-host.tsx

import "cxf-codegen/register";
export { default } from "cxf-codegen/pages/plasmic-host";

next.config.mjs

import { cxfNextConfig } from "cxf-codegen";
export default cxfNextConfig;

Environment Variables

Set these in your .env file:

CXF_BASE_URL=https://your-cxf-instance.com
CXF_API_KEY=your-public-api-key

Optional:

CXF_DEV_API_KEY=your-dev-api-key
CXF_USER_API_KEY=your-user-api-key

Usage

ApiCall Component

In Plasmic, use the ApiCall component to fetch data:

• apiType: endpoint, contact, dev, or user
• path: API path (e.g., me, blog-posts)
• method: HTTP method
• params: Query parameters
• body: Request body (for POST/PATCH/PUT/DELETE)

Data is available via $ctx.response.*:

• $ctx.response.data - The response data
• $ctx.response.error - Error message if failed
• $ctx.response.loading - Loading state
• $ctx.response.success - Boolean for success
• $ctx.response.failed - Boolean for failure

Server-Side Rendering (ISR/SSR)

Use createServerProps for pages that need pre-fetched data:

import { ServerPageWrapper, createServerProps, ServerPageProps } from "cxf-codegen";
import { PlasmicHomepage } from "../components/plasmic/Homepage";

function Homepage(props: ServerPageProps) {
  return (
    <ServerPageWrapper {...props}>
      <PlasmicHomepage />
    </ServerPageWrapper>
  );
}

export default Homepage;

// ISR (default)
export const { getStaticProps } = createServerProps("/", PlasmicHomepage);

// Or SSR for authenticated pages
export const { getServerSideProps } = createServerProps("/profile", PlasmicProfile, {
  mode: "ssr"
});

Updating

To update the library across all your projects:

npm update cxf-codegen