Para construir um aplicativo de blog usando Next.js com backend e frontend, onde os usuários podem adicionar e excluir blogs e armazenar os dados em um banco de dados, siga estas etapas:

1. Configurar projeto Next.js

Primeiro, crie um novo projeto Next.js, caso ainda não o tenha feito:

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

2. Configurar banco de dados

Para este projeto, vamos usar MongoDB via Mongoose como banco de dados.

• Instale o Mangusto:

npm install mongoose

• Crie um banco de dados MongoDB usando serviços como MongoDB Atlas ou use uma configuração local do MongoDB.

• Conecte-se ao MongoDB criando um arquivo lib/mongodb.js:
  

// 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;

Adicione o MONGODB_URI ao seu arquivo .env.local:

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

3. Definir esquema de blog

Crie um modelo para blogs em models/Blog.js:

// 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. Criar rotas de API para blog

No Next.js, você pode criar rotas de API no diretório pages/api.

• Crie páginas/api/blog/index.js para lidar com solicitações GET e POST (adicionando blogs):

// 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;
  }
}

• Crie páginas/api/blog/[id].js para lidar com solicitações DELETE:

// 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. Criar front-end para adicionar e exibir blogs

• Crie uma página pages/index.js para listar todos os blogs e um formulário para adicionar novos blogs:

// 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. Iniciar o servidor

Execute seu aplicativo:

npm run dev

7. Testando o aplicativo

• Agora você pode adicionar e excluir blogs, e todos os dados serão armazenados em seu banco de dados MongoDB.

Me avise se precisar de mais detalhes!