如何使用 Next.js 构建现代 SaaS 应用

Next.js என்பது ஒரு சக்திவாய்ந்த React கட்டமைப்பு ஆகும், இது நவீன வலை பயன்பாடுகளை உருவாக்குவது எளிதாகவும், திறமையாகவும் ஆகிறது. இந்த கட்டுரையில், நாங்கள் முழுமையான படி வழிகாட்டுதலுடன், Next.js ஐப் பயன்படுத்தி எவ்வாறு எளிய SaaS பயன்பாட்டை உருவாக்குவது என்பதை கற்றுக்கொடுக்கிறோம். நாங்கள் மேம்பாட்டு சூழலின் அமைப்பிலிருந்து அடிப்படை செயல்பாடுகளை உருவாக்குவதற்கான முழு செயல்முறையை உள்ளடக்கியுள்ளோம்.

1. சூழல் தயாரிப்பு

தொடங்குவதற்கு முன், உங்கள் மேம்பாட்டு சூழல் தயாராக உள்ளதா என்பதை உறுதிப்படுத்த வேண்டும். கீழ்காணும் படிகளை பின்பற்றவும்:

1.1 Node.js மற்றும் npm ஐ நிறுவவும்

உங்கள் கணினியில் Node.js மற்றும் npm நிறுவப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். பதிப்புகளை சரிபார்க்க கீழ்காணும் கட்டளைகளை டெர்மினலில் இயக்கவும்:

node -v
npm -v

நீங்கள் இன்னும் நிறுவவில்லை என்றால், Node.js அதிகாரப்பூர்வ வலைத்தளத்திற்கு சென்று பதிவிறக்கம் செய்து நிறுவவும்.

1.2 Next.js திட்டத்தை உருவாக்கவும்

டெர்மினலில் கீழ்காணும் கட்டளையை இயக்கி புதிய Next.js திட்டத்தை உருவாக்கவும்:

npx create-next-app@latest my-saas-app
cd my-saas-app

இதன் மூலம் my-saas-app என்ற புதிய திட்டம் உருவாக்கப்படும் மற்றும் தேவையான சார்ந்தவற்றை தானாகவே நிறுவும்.

2. திட்ட அமைப்பு

my-saas-app அடைவில், நீங்கள் கீழ்காணும் அடிப்படை அமைப்பை காண்பீர்கள்:

my-saas-app/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
│   └── ...
├── public/
├── styles/
└── ...

• pages/: பயன்பாட்டின் பக்கங்களை உள்ளடக்கியது.
• public/: படங்கள், ஐகான்கள் போன்ற பொது வளங்களை உள்ளடக்கியது.
• styles/: CSS கோப்புகளை உள்ளடக்கியது.

3. மைய செயல்பாடுகளை உருவாக்குதல்

இந்த பகுதியில், எளிய பயனர் பதிவு மற்றும் உள்நுழைவு அமைப்பை செயல்படுத்துவோம்.

3.1 தரவுத்தொகுப்பை அமைக்கவும்

இந்த எடுத்துக்காட்டில், நாங்கள் Supabase ஐ பின்னணி சேவையாகப் பயன்படுத்துகிறோம். கீழ்காணும் படிகளை பின்பற்றவும்:

1. Supabase அதிகாரப்பூர்வ வலைத்தளத்திற்கு சென்று ஒரு கணக்கை உருவாக்கவும்.
2. புதிய திட்டத்தை உருவாக்கி, உங்கள் தரவுத்தொகுப்பு URL மற்றும் API விசையை நினைவில் வைக்கவும்.
3. தரவுத்தொகுப்புடன் இணைந்து, கீழ்காணும் பயனர் அட்டவணையை உருவாக்கவும்:

create table users (
  id serial primary key,
  email text unique not null,
  password text not null
);

3.2 Supabase கிளையன்ட் நிறுவவும்

Next.js திட்டத்தில் Supabase கிளையன்ட் நூலகத்தை நிறுவவும்:

npm install @supabase/supabase-js

3.3 பயனர் பதிவு பக்கம் உருவாக்கவும்

pages/ அடைவில், புதிய கோப்பு register.js உருவாக்கி, கீழ்காணும் உள்ளடக்கத்தைச் சேர்க்கவும்:

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

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Register = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    const { user, error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('பதிவு வெற்றிகரமாக முடிந்தது!');
    }
  };

  return (
    
      

# பதிவு

       setEmail(e.target.value)} 
      />
       setPassword(e.target.value)} 
      />
      பதிவு
    
  );
};

export default Register;

3.4 பயனர் உள்நுழைவு பக்கம் உருவாக்கவும்

pages/ அடைவில், புதிய கோப்பு login.js உருவாக்கி, கீழ்காணும் உள்ளடக்கத்தைச் சேர்க்கவும்:

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

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY');

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const { user, error } = await supabase.auth.signIn({
      email,
      password,
    });

    if (error) {
      console.error(error);
    } else {
      alert('உள்நுழைவு வெற்றிகரமாக முடிந்தது!');
    }
  };

  return (
    
      

# உள்நுழைவு

       setEmail(e.target.value)} 
      />
       setPassword(e.target.value)} 
      />
      உள்நுழைவு
    
  );
};

export default Login;

4. பயன்பாட்டை வெளியிடுதல்

4.1 வெளியீட்டு தளத்தை தேர்ந்தெடுக்கவும்

நாங்கள் Vercel ஐப் பயன்படுத்தி எங்கள் Next.js பயன்பாட்டை வெளியிடுகிறோம். கீழ்காணும் படிகளை பின்பற்றவும்:

1. Vercel அதிகாரப்பூர்வ வலைத்தளத்திற்கு சென்று ஒரு கணக்கை உருவாக்கவும்.
2. புதிய திட்டத்தை உருவாக்கி, உங்கள் GitHub சேமிப்பகத்தை தேர்ந்தெடுக்கவும்.
3. சூழல் மாறிலிகளில் Supabase URL மற்றும் API விசையைச் சேர்க்கவும்.
4. வெளியீட்டிற்கு கிளிக் செய்து, Vercel வெளியீட்டை முடிக்க காத்திருக்கவும்.

4.2 வெளியீட்டை சரிபார்க்கவும்

வெளியீட்டை முடித்த பிறகு, நீங்கள் ஒரு பொது URL ஐப் பெறுவீர்கள். இந்த URL ஐ அணுகி, பயன்பாடு சரியாக செயல்படுகிறதா என்பதை உறுதிப்படுத்தவும்.

5. சுருக்கமாக

இந்த கட்டுரையின் படிகள் மூலம், நீங்கள் Next.js ஐப் பயன்படுத்தி எளிய SaaS பயன்பாட்டை உருவாக்கியுள்ளீர்கள், பயனர் பதிவு மற்றும் உள்நுழைவு செயல்பாடுகளை உள்ளடக்கியது. Next.js இன் சக்தி அதன் நெகிழ்வுத்தன்மை மற்றும் திறமையில் உள்ளது, இது மேலும் சிக்கலான தேவைகளை பூர்த்தி செய்ய எளிதாக விரிவாக்கலாம். நீங்கள் இதற்கான அடிப்படையில் மேலும் ஆழமாக கற்றுக்கொண்டு, மேலும் அற்புதமான பயன்பாடுகளை உருவாக்குவீர்கள் என நம்புகிறேன்!