Next.js Integration

This example uses Next.js API Routes to proxy requests from your website to the Recsphere API, keeping your key server-side.

Environment variables

.env.local

# Never commit this file
RECSPHERE_API_KEY=your_api_key_here
RECSPHERE_API_BASE=https://api.recsphere.co.uk

List vacancies

pages/api/vacancies.js

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();

  const response = await fetch(`${process.env.RECSPHERE_API_BASE}/v1/vacancies/get-filtered`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Api-Key': process.env.RECSPHERE_API_KEY,
    },
    body: JSON.stringify(req.body),
  });

  const data = await response.json();
  res.status(response.status).json(data);
}

Submit an application

pages/api/apply/[refNo].js

import formidable from 'formidable';
import fs from 'fs';

export const config = { api: { bodyParser: false } };

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();

  const { refNo } = req.query;
  const form = formidable({ maxFileSize: 10 * 1024 * 1024 });

  form.parse(req, async (err, fields, files) => {
    if (err) return res.status(400).json({ error: err.message });

    const formData = new FormData();
    formData.append('candidateName',  fields.candidateName[0]);
    formData.append('candidateEmail', fields.candidateEmail[0]);
    if (fields.candidatePhone) formData.append('candidatePhone', fields.candidatePhone[0]);
    if (fields.coverLetter)    formData.append('coverLetter',    fields.coverLetter[0]);
    if (fields.linkedInUrl)    formData.append('linkedInUrl',    fields.linkedInUrl[0]);

    const cvFile = files.cv[0];
    formData.append('cv', new Blob([fs.readFileSync(cvFile.filepath)]), cvFile.originalFilename);

    const response = await fetch(
      `${process.env.RECSPHERE_API_BASE}/v1/vacancies/${refNo}/apply`,
      {
        method: 'POST',
        headers: { 'X-Api-Key': process.env.RECSPHERE_API_KEY },
        body: formData,
      }
    );

    const data = await response.json();
    res.status(response.status).json(data);
  });
}

Frontend usage

// Fetch vacancies
const response = await fetch('/api/vacancies', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    take: 10,
    columns: ['id', 'refNo', 'role', 'description', 'salaryFrom', 'salaryTo'],
    filters: { statusId: 1 },
  }),
});
const { items, total } = await response.json();

// Submit application
const formData = new FormData(document.getElementById('applyForm'));
const applyResponse = await fetch(`/api/apply/${refNo}`, {
  method: 'POST',
  body: formData,
});
const result = await applyResponse.json();