Add/Modify APIs

The ROQ's generated B2B SaaS application is based on Next.js (opens in a new tab) from Vercel so it is easy to develop, adding more features, API endpoints, custom styling, etc.

To continue development, you should fork or clone the source code of the generated application. Read this documentation.

How To Add API Endpoint

The generated application uses API endpoints in pages/api directory. These APIs are the bridges between the UI components, ROQ platform and other third party services.

To add API endpoint is easy, you can do so by creating a function inside pages/api directory that has the following format:

import type { NextApiRequest, NextApiResponse } from 'next';
 
// TypeScript
export async function handler(req: NextApiRequest, res: NextApiResponse) {
	//...do your business with this route here
}

in the generated application if you need API endpoint with authentication you can secure the handler with withAuth() function.

import type { NextApiRequest, NextApiResponse } from 'next';
import { withAuth, getServerSession } from '@roq/nextjs';
 
// TypeScript
async function handler(req: NextApiRequest, res: NextApiResponse) {
	//...do your business with this route here
}
 
export default function filesHandler(req: NextApiRequest, res: NextApiResponse) {
  return withAuth(req, res)(handler);
}

Add Hello API Endpoint

For example, if we want to add hello API endpoint to the generated application, this is what you will do: create hello.ts file in pages/api directory then write this code

import type { NextApiRequest, NextApiResponse } from 'next';
import { withAuth, getServerSession } from '@roq/nextjs';
 
// TypeScript
export async function handler(req: NextApiRequest, res: NextApiResponse) {
	res.status(200).json({ text: "ROQ generated application" })
}
 
export default function helloHandler(req: NextApiRequest, res: NextApiResponse) {
	return withAuth(req, res)(handler);
}

Make sure you already logged in to test this API endpoint and then type the local development URL for the generated application http://localhost:3000/api/hello

simple hello api endpoint NextApiResponse

With a simple code changes you can get the current logged in user data using getServerSession()

// TypeScript
export async function handler(req: NextApiRequest, res: NextApiResponse) {
	const { user } = getServerSession(req)
	res.status(200).json({ user })
}

If you run the local development URL again, the JSON response format will be like this:

{
    "user": {
        "firstName": "Anna",
        "lastName": "William",
        "email": "anna.w@gmail.com",
        "timezone": "Asia/Jakarta",
        "locale": "en-US",
        "roles": [
            "account-owner"
        ],
        "tenantId": "e71c6c26-a44d-481a-9867-106443941bc7"
    }
}

and then you can use the JSON data on the client side (pages directory) for further development.

Display Hello Data

After make an API endpoint to the generated application then you can make a custom page to display the response data (or anything what you want todo with it).

Create a page in the pages directory and give a name, for example hello.tsx. In this file write this code

// hello.tsx
import { requireNextAuth } from '@roq/nextjs';
import { useRouter } from 'next/router';
import AppLayout from 'layout/app-layout';
import { Box } from '@chakra-ui/react';
 
function HelloPage() {
  const router = useRouter();
 
  return (
    <AppLayout>
      <Box w="100%" h="80vh">
        <p>Hello Page</p>
      </Box>
    </AppLayout>
  );
}
 
export default requireNextAuth({
  redirectIfAuthenticated: false,
  redirectTo: '/',
})(HelloPage);

If you access this page through browser http://localhost:3000/hello, your application will change like this:

donisplay hello page

We use static text Hello page on the display. To use the response data from /api/hello endpoint you need to fetch the data.

In ROQ's generated B2B SaaS application, the data fetching is very easy with the help of swr package.

SWR (opens in a new tab) is a React Hooks for Data Fetching. With SWR, components will get a stream of data updates constantly and automatically. And the UI will be always fast and reactive.

And for the better application management, you can create a React Hello component in components/hello directory, give it a name index.tsx

The ROQ's generated B2B SaaS application use Chakra UI (opens in a new tab). It is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

// components/hello/index.tsx
import useSWR from 'swr';
import { Flex, Card, CardBody, Text, Stack, StackDivider, Heading, CardHeader, Box } from '@chakra-ui/react';
 
export default function Hello() {
  const fetcher = (apiURL: string) => fetch(apiURL).then((res) => res.json());
  const { data, error } = useSWR('/api/hello', fetcher);
  console.log(data);
 
  return (
    <Flex direction="column">
      <Card>
        <CardHeader>
          <Heading size="md">User Details</Heading>
        </CardHeader>
 
        <CardBody>
          <Stack divider={<StackDivider />} spacing="4">
            <Box>
              <Heading size="xs" textTransform="uppercase">
                Name
              </Heading>
              <Text pt="2" fontSize="sm">
                {data.user.firstName} {data.user.lastName}
              </Text>
            </Box>
            <Box>
              <Heading size="xs" textTransform="uppercase">
                Email
              </Heading>
              <Text pt="2" fontSize="sm">
                {data.user.email}
              </Text>
            </Box>
            <Box>
              <Heading size="xs" textTransform="uppercase">
                Tenant ID
              </Heading>
              <Text pt="2" fontSize="sm">
                {data.user.tenantId}
              </Text>
            </Box>
          </Stack>
        </CardBody>
      </Card>
    </Flex>
  );
}

After that you need to change the previous hello.jsx page and import React Hello component:

// pages/hello.tsx
import { requireNextAuth } from '@roq/nextjs';
import { useRouter } from 'next/router';
import AppLayout from 'layout/app-layout';
import { Box } from '@chakra-ui/react';
import Hello from 'components/hello';
 
function HelloPage() {
  const router = useRouter();
 
  return (
    <AppLayout>
      <Box w="100%" h="80vh">
        <Hello />
      </Box>
    </AppLayout>
  );
}
 
export default requireNextAuth({
  redirectIfAuthenticated: false,
  redirectTo: '/',
})(HelloPage);

After that you can check again the URL http://localhost:3000/hello to see the changes

React Hello component

If you want to use UI Components from ROQ, go to this documentation

Run Local Development Customize Form Fields