बैकएंड और फ्रंटएंड दोनों के साथ Next.js का उपयोग करके एक ब्लॉग ऐप बनाने के लिए, जहां उपयोगकर्ता ब्लॉग जोड़ और हटा सकते हैं, और डेटा को डेटाबेस में संग्रहीत कर सकते हैं, इन चरणों का पालन करें:

1. नेक्स्ट.जेएस प्रोजेक्ट सेट करें

सबसे पहले, एक नया Next.js प्रोजेक्ट बनाएं यदि आपने पहले से नहीं बनाया है:

npx create-next-app@latest blog-app
cd blog-app
npm install

2. डेटाबेस सेट करें

इस प्रोजेक्ट के लिए, आइए डेटाबेस के रूप में MongoDB के माध्यम से Mongoose का उपयोग करें।

• नेवला स्थापित करें:

npm install mongoose

• MongoDB एटलस जैसी सेवाओं का उपयोग करके एक MongoDB डेटाबेस बनाएं या स्थानीय MongoDB सेटअप का उपयोग करें।

• एक lib/mongodb.js फ़ाइल बनाकर MongoDB से कनेक्ट करें:
  

// lib/mongodb.js
import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI).then((mongoose) => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

MONGODB_URI को अपनी .env.local फ़ाइल में जोड़ें:

MONGODB_URI=mongodb srv://:@cluster0.mongodb.net/blog-app?retryWrites=true&w=majority

3. ब्लॉग स्कीमा को परिभाषित करें

मॉडल/ब्लॉग.जेएस में ब्लॉग के लिए एक मॉडल बनाएं:

// models/Blog.js
import mongoose from 'mongoose';

const BlogSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
}, { timestamps: true });

export default mongoose.models.Blog || mongoose.model('Blog', BlogSchema);

4. ब्लॉग के लिए एपीआई रूट बनाएं

नेक्स्ट.जेएस में, आप पेज/एपीआई डायरेक्टरी में एपीआई रूट बना सकते हैं।

• GET और POST अनुरोधों को संभालने के लिए पेज/api/blog/index.js बनाएं (ब्लॉग जोड़ना):

// pages/api/blog/index.js
import dbConnect from '../../../lib/mongodb';
import Blog from '../../../models/Blog';

export default async function handler(req, res) {
  const { method } = req;

  await dbConnect();

  switch (method) {
    case 'GET':
      try {
        const blogs = await Blog.find({});
        res.status(200).json({ success: true, data: blogs });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    case 'POST':
      try {
        const blog = await Blog.create(req.body);
        res.status(201).json({ success: true, data: blog });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}

• DELETE अनुरोधों को संभालने के लिए पेज/api/blog/[id].js बनाएं:

// pages/api/blog/[id].js
import dbConnect from '../../../lib/mongodb';
import Blog from '../../../models/Blog';

export default async function handler(req, res) {
  const { method } = req;
  const { id } = req.query;

  await dbConnect();

  switch (method) {
    case 'DELETE':
      try {
        const blog = await Blog.findByIdAndDelete(id);
        if (!blog) {
          return res.status(400).json({ success: false });
        }
        res.status(200).json({ success: true, data: {} });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}

5. ब्लॉग जोड़ने और प्रदर्शित करने के लिए फ्रंटएंड बनाएं

• सभी ब्लॉगों को सूचीबद्ध करने के लिए एक पेज पेज/index.js बनाएं और नए ब्लॉग जोड़ने के लिए एक फॉर्म बनाएं:

// pages/index.js
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function Home() {
  const [blogs, setBlogs] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  useEffect(() => {
    async function fetchBlogs() {
      const response = await axios.get('/api/blog');
      setBlogs(response.data.data);
    }
    fetchBlogs();
  }, []);

  const addBlog = async () => {
    const response = await axios.post('/api/blog', { title, content });
    setBlogs([...blogs, response.data.data]);
    setTitle('');
    setContent('');
  };

  const deleteBlog = async (id) => {
    await axios.delete(`/api/blog/${id}`);
    setBlogs(blogs.filter(blog => blog._id !== id));
  };

  return (
    

      
Blog App
      
 { e.preventDefault(); addBlog(); }}>
         setTitle(e.target.value)}
          placeholder="Blog Title"
        />
         setContent(e.target.value)}
          placeholder="Blog Content"
        />
        <button type="submit">Add Blog</button>
      
      
Blogs
      

        {blogs.map(blog => (
          

            
{blog.title}
            
{blog.content}
             deleteBlog(blog._id)}>Delete
          
        ))}
      
  );
}

6. सर्वर प्रारंभ करें

अपना एप्लिकेशन चलाएँ:

npm run dev

7. ऐप का परीक्षण

• अब आप ब्लॉग जोड़ और हटा सकते हैं, और सभी डेटा आपके MongoDB डेटाबेस में संग्रहीत किया जाएगा।

यदि आपको अधिक विवरण चाहिए तो मुझे बताएं!