next-define

❗
next-define

Fully typed `define` functions for Next.js

🚀 Install

Install it locally in your project

# npm
npm install next-define

# yarn
yarn add next-define

# pnpm
pnpm install next-define

🦄 Usage

To get started using next-define, you can import the definePage function from the package and use it to define your page.

// pages/index.tsx
import { definePage } from "next-define";

export const { Component } = definePage({
  Component: () => <>Hello World</>,
});

export default Component;

// pages/index.tsx
import { definePage } from "next-define";

export const { Component, getStaticProps } = definePage({
  getStaticProps: () => ({ props: { name: "John" } }),
  Component: ({ name }) => <>Hello {name}</>,
});

export default Component;

// pages/index.tsx
import { definePage } from "next-define";

export const { Component, getServerSideProps } = definePage({
  getServerSideProps: () => ({ props: { name: "John" } }),
  Component: ({ name }) => <>Hello {name}</>,
});

export default Component;

Or you can import defineApi to define a new API route

// pages/api/hello.ts
import { defineApi } from "next-define";

export default defineApi((req, res) =>
  res.status(200).json({
    name: "John",
  })
);

// pages/api/hello.ts
import { defineApi } from "next-define";

export const { config, handler } = defineApi(
  (req, res) =>
    res.status(200).json({
      name: "John",
    }),
  {
    runtime: "nodejs",
  }
);

export default handler;

We even offer support for the new app directory beta by importing from the /app export

// app/page.tsx
import { definePage } from "next-define/app";

const { Component } = definePage({
  Component: ({ params, searchParams }) => <>Hello World</>,
});

export default Component;

// app/layout.tsx
import { defineLayout } from "next-define/app";

const { Component } = defineLayout(({ children, params }) => <>{children}</>);

export default Component;

// app/error.tsx
import { defineError } from "next-define/app";

export default defineError(({ error, reset }) => <></>);

// app/hello/router.ts
import { defineRoute } from "next-define/app";

export const { GET, runtime } = defineRoute({
  runtime: "edge",
  GET: (req, { params }) =>
    new Response(
      JSON.stringify({
        message: "Hello World",
      })
    ),
});