உழைப்பாளி தயாராக்கப்பட்ட முழு-மைய உள்ள கட்டுரை | சுபாபேஸ் | அடுத்தJS14 | பேரோ

In this tutorial, we will be building a job-ready full-stack application using Supabase, Next.js 14, and Pro. This project will be focusing on creating a job board website for Tamil-speaking users.

To start, make sure you have Node.js and npm installed on your machine. If you don’t have them, you can download them from the official Node.js website.

1. Create a new Next.js project using Create Next App:

npx create-next-app@14 job-board
cd job-board
npm install @supabase/supabase-js

1. Set up Supabase:

Sign up for a free Supabase account at https://app.supabase.io/. Once you have created an account, create a new project and get your project URL and API key.

1. Set up environment variables:

Create a new file named .env.local in the root of your project and add your Supabase project URL and API key like this:

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_API_KEY

1. Create a new file named supabase.js in the lib folder of your project and add the following code:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

1. Set up API routes:

Create a new folder named api in the pages folder of your project. Inside the api folder, create a new file named jobs.js and add the following code:

// api/jobs.js
import { supabase } from '../../lib/supabase';

export default async function handler(req, res) {
  let { data: jobs, error } = await supabase.from('jobs').select('*');

  if (error) {
    return res.status(500).json({ error: error.message });
  }

  return res.status(200).json(jobs);
}

1. Create a new file named index.js in the pages folder of your project and add the following code:

import { useEffect, useState } from 'react';

export default function Home() {
  const [jobs, setJobs] = useState([]);

  useEffect(() => {
    fetch('/api/jobs')
      .then(res => res.json())
      .then(data => setJobs(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      <h1>Tamil Job Board</h1>
      <ul>
        {jobs.map(job => (
          <li key={job.id}>{job.title}</li>
        ))}
      </ul>
    </div>
  );
}

1. Test your application:

Start your Next.js development server by running npm run dev in the terminal. Open your browser and navigate to http://localhost:3000 to see your job board website in action.

That’s it! You have successfully built a job-ready full-stack application using Supabase, Next.js 14, and Pro. Feel free to customize and add more features to suit your needs. Happy coding!