Next.js

Using Telefunc with Next.js.

1. Install

npm install telefunc

pnpm add telefunc

bun add telefunc

yarn add telefunc

2. Next.js config

// next.config.js
 
import withTelefunc from 'telefunc/next'
 
let nextConfig = {}
nextConfig = withTelefunc(nextConfig)
 
export default nextConfig

// next.config.ts
 
import type { NextConfig } from 'next'
import withTelefunc from 'telefunc/next'
 
let nextConfig: NextConfig = {}
nextConfig = withTelefunc(nextConfig)
 
export default nextConfig

3. Server integration

// app/api/telefunc/route.js
// Environment: server
 
import { telefunc, config } from 'telefunc'
 
config.telefuncUrl = '/api/telefunc'
 
async function handler(request) {
  const httpResponse = await telefunc({ request })
  return new Response(httpResponse.body, {
    status: httpResponse.statusCode,
    headers: { 'content-type': httpResponse.contentType }
  })
}
export { handler as GET, handler as POST }

// app/api/telefunc/route.ts
// Environment: server
 
import { telefunc, config } from 'telefunc'
 
config.telefuncUrl = '/api/telefunc'
 
async function handler(request: Request) {
  const httpResponse = await telefunc({ request })
  return new Response(httpResponse.body, {
    status: httpResponse.statusCode,
    headers: { 'content-type': httpResponse.contentType },
  })
}
export { handler as GET, handler as POST }

4. Client config

Since the route handler is at /api/telefunc instead of the default /_telefunc, set the client-side URL using a 'use client' provider:

// app/client-providers.jsx
// Environment: client
 
'use client'
 
import { config } from 'telefunc/client'
 
config.telefuncUrl = '/api/telefunc'
 
export function ClientProviders({ children }) {
  return <>{children}</>
}

// app/client-providers.tsx
// Environment: client
 
'use client'
 
import { config } from 'telefunc/client'
 
config.telefuncUrl = '/api/telefunc'
 
export function ClientProviders({ children }: { children: React.ReactNode }) {
  return <>{children}</>
}

// app/layout.jsx
 
import { ClientProviders } from './client-providers'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  )
}

// app/layout.tsx
 
import { ClientProviders } from './client-providers'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  )
}

5. Create a telefunction

Create your first telefunction, for example:

// components/TodoList.telefunc.js
// Environment: server
 
export async function onNewTodo({ text }) {
  await db.todo.create({ data: { text } })
  return db.todo.findMany()
}

// components/TodoList.telefunc.ts
// Environment: server
 
export async function onNewTodo({ text }: { text: string }) {
  await db.todo.create({ data: { text } })
  return db.todo.findMany()
}

Call it from the client:

// components/TodoList.jsx
// Environment: client & server
 
import { onNewTodo } from './TodoList.telefunc'
 
function TodoList() {
  const onSubmit = async (text) => {
    const todos = await onNewTodo({ text })
    // ...
  }
}

// components/TodoList.tsx
// Environment: client & server
 
import { onNewTodo } from './TodoList.telefunc'
 
function TodoList() {
  const onSubmit = async (text: string) => {
    const todos = await onNewTodo({ text })
    // ...
  }
}

To pass contextual information (e.g. the logged-in user) to your telefunctions, see API > getContext().

Example

/examples/next

Initial Data

For fetching the initial data of pages (SSR data) use Next.js's built-in data fetching mechanism instead of Telefunc.

For example, you can use Next.js Server Components to fetch initial data directly from a database, see Next.js Docs > Data Fetching.

You can still use Telefunc for fetching data but only after the initial rendering of the page, for example for pagination or infinite scroll.

In case you're curious: you cannot use Telefunc for server-side rendered (SSR) data because only the framework can pass SSR data from the server to the client-side (which is needed for hydration). This is common to all SSR frameworks like Next.js.