[Next.js] Next.js 매우 간단한 게시판 만들기

Next.js 를 이용하여 매~~우 간단한 게시판을 만들어 보겠습니다. 혹시 Next.js 가 설치가 안되셨다면 [Next.js] Next.js 설치하는 방법 을 참고해주세요.

1. 프로젝트 구조

my-board/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Post.js
│   │   └── PostList.js
│   ├── pages/
│   │   └── index.js
│   ├── styles/
│   │   └── globals.css
│   └── utils/
│       └── api.js
├── .gitignore
├── next.config.js
├── package.json
└── README.md

2. components/Post.js 작성

import React from "react";

const Post = ({ post }) => {
    return (
        <div>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
            <p>작성자: {post.author}</p>
            <hr />
        </div>
    );
};

export default Post;

3. components/PostList.js 작성

import React from "react";
import Post from "./Post";

const PostList = ({ posts }) => {
    return (
        <div className="post-list">
            {posts.map(post => (
                <Post key={post.id} post={post} />
            ))}
        </div>
    );
};

export default PostList;

4. pages/index.js 작성

import React, { useState } from "react";
import PostList from "../components/PostList";

const InitBoard = () => {

    const [posts, setPosts] = useState([
        { id: 1, title: '첫 번째 게시물', content: '첫 번째 게시물 내용입니다.', author: '홍길동' },
        { id: 2, title: '두 번째 게시물', content: '두 번째 게시물의 내용입니다.', author: '김철수' },
        { id: 3, title: '세 번째 게시물', content: '세 번째 게시물의 내용입니다.', author: '이영희' },
    ]);

    return (
        <div className="container">
            <h1>게시판</h1>
            <PostList posts={posts} />
        </div>
    );

}

export default InitBoard;

5. 실행

npm run dev

감사합니다.