다음 JS 블로그 앱

사용자가 블로그를 추가 및 삭제하고 데이터베이스에 데이터를 저장할 수 있는 백엔드와 프런트엔드가 모두 포함된 Next.js를 사용하여 블로그 앱을 구축하려면 다음 단계를 따르세요.

1. Next.js 프로젝트 설정

아직 Next.js 프로젝트를 만들지 않았다면 먼저 새 Next.js 프로젝트를 만드세요.

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

2. 데이터베이스 설정

이번 프로젝트에서는 Mongoose를 통해 MongoDB를 데이터베이스로 사용하겠습니다.

• 몽구스 설치:

npm install mongoose

• MongoDB Atlas와 같은 서비스를 사용하여 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://<username>:<password>@cluster0.mongodb.net/blog-app?retryWrites=true&w=majority

3. 블로그 스키마 정의

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. 블로그용 API 경로 생성

Next.js에서는 페이지/api 디렉터리에 API 경로를 생성할 수 있습니다.

• 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. 블로그 추가 및 표시를 위한 프런트엔드 생성

• 모든 블로그를 나열하기 위한 페이지인 Pages/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 (
    <div>
      <h1>Blog App</h1>
      <form onSubmit={(e) => { e.preventDefault(); addBlog(); }}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Blog Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Blog Content"
        />
        <button type="submit">Add Blog</button>
      </form>
      <h2>Blogs</h2>
      <ul>
        {blogs.map(blog => (
          <li key={blog._id}>
            <h3>{blog.title}</h3>
            <p>{blog.content}</p>
            <button onClick={() => deleteBlog(blog._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

6. 서버 시작

애플리케이션 실행:

npm run dev

7. 앱 테스트

• 이제 블로그를 추가하고 삭제할 수 있으며 모든 데이터는 MongoDB 데이터베이스에 저장됩니다.

더 자세한 내용이 필요하시면 알려주세요!

위 내용은 다음 JS 블로그 앱의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!