Next.Js로 실용적인 프로젝트를 만들어보세요 - 10가지 아이디어

2024-10-24 08:12:49

webdevbeginnersnextjsreact

Next.Js 프로젝트 아이디어 10가지

웹 개발자로서 Next.Js를 활용하여 실력을 향상시키고, 매력적인 포트폴리오를 만들고 싶으신가요? 본 글에서는 Next.Js를 활용할 수 있는 10가지 실용적인 프로젝트 아이디어를 소개합니다. 각 프로젝트는 중요한 개념을 익히는 데 도움을 줄 것입니다. 각 아이디어에 대한 설명과 기본 코드를 포함하였으니, 함께 살펴보시죠.

1. Next.Js로 블로그 만들기

난이도: 쉬움

주요 개념: 파일 기반 라우팅, 마크다운 처리, 정적 사이트 생성 (SSG)

개인 블로그를 만들어보세요. 마크다운 파일을 블로그 글로 변환하여 사용할 수 있습니다. 이 프로젝트를 통해 내용 관리 및 메타데이터 처리, 정적 사이트 생성의 기초를 배울 수 있습니다.

주요 기능:

마크다운 기반 블로그 게시물
카테고리 필터링
읽기 시간 추정
SEO 최적화
반응형 디자인

코드 샘플:

// pages/posts/[slug].js
import { getPostData, getAllPostSlugs } from '../../lib/posts';
import Head from 'next/head';
import Date from '../../components/date';

export async function getStaticPaths() {
  const paths = getAllPostSlugs();
  return {
    paths,
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.slug);
  return {
    props: {
      postData
    }
  };
}

export default function Post({ postData }) {
  return (
    <article>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <h1>{postData.title}</h1>
      <Date dateString={postData.date} />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </article>
  );
}

2. Next.Js로 실시간 채팅 애플리케이션 만들기

난이도: 중간

주요 개념: 웹소켓 통합, 실시간 업데이트, 사용자 인증

Next.Js와 Socket.io를 이용하여 실시간 채팅 애플리케이션을 만들어 보세요. 이 프로젝트에서는 실시간 통신 및 상태 관리에 대해 배울 수 있습니다.

주요 기능:

실시간 메시징
사용자 인증
온라인 상태 표시기
메시지 히스토리
입력 중 표시기

코드 샘플:

// pages/api/socket.js
import { Server } from 'socket.io';

const SocketHandler = (req, res) => {
  if (res.socket.server.io) {
    console.log('Socket already running');
    return res.end();
  }

  const io = new Server(res.socket.server);
  res.socket.server.io = io;

  io.on('connection', socket => {
    socket.on('send-message', msg => {
      io.emit('receive-message', msg);
    });
  });

  return res.end();
};

export default SocketHandler;

3. Next.Js로 전자상거래 상품 페이지 만들기

난이도: 중간

주요 개념: API 경로, 데이터 페칭, 장바구니 관리

동적 가격 책정, 이미지 갤러리 및 장바구니 기능이 있는 상품 페이지를 만들어보세요.

주요 기능:

상품 이미지 갤러리
사이즈/변형 선택
장바구니에 추가 기능
재고 관리
가격 계산

코드 샘플:

// pages/products/[id].js
import { useState } from 'react';
import Image from 'next/image';
import { useCart } from '../../hooks/useCart';

export async function getStaticProps({ params }) {
  const product = await fetch(`/api/products/${params.id}`).then(r => r.json());
  return {
    props: { product },
    revalidate: 60
  };
}

export default function ProductPage({ product }) {
  const [selectedSize, setSelectedSize] = useState(null);
  const { addToCart } = useCart();

  return (
    <div className="product-container">
      <div className="image-gallery">
        {product.images.map(img => (
          <Image 
            key={img.id}
            src={img.url}
            alt={product.name}
            width={500}
            height={500}
          />
        ))}
      </div>
      <div className="product-details">
        <h1>{product.name}</h1>
        <p className="price">${product.price}</p>
        <div className="size-selector">
          {product.sizes.map(size => (
            <button
              key={size}
              onClick={() => setSelectedSize(size)}
              className={selectedSize === size ? 'selected' : ''}
            >
              {size}
            </button>
          ))}
        </div>
        <button 
          onClick={() => addToCart(product, selectedSize)}
          disabled={!selectedSize}
        >
          장바구니에 추가
        </button>
      </div>
    </div>
  );
}

4. Next.Js로 작업 관리 대시보드 만들기

난이도: 중간

주요 개념: CRUD 작업, 데이터 지속성, 드래그 앤 드롭

드롭 기능이 있는 Trello와 유사한 작업 관리 대시보드를 만들어보세요.

주요 기능:

작업 생성 및 수정
드래그 앤 드롭 조직
작업 카테고리/리스트
마감일
우선순위 수준

코드 샘플:

// components/TaskBoard.js
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import TaskList from './TaskList';

export default function TaskBoard({ tasks, onTaskMove }) {
  const handleDragEnd = (result) => {
    if (!result.destination) return;

    const { source, destination } = result;
    onTaskMove(
      result.draggableId,
      source.droppableId,
      destination.droppableId
    );
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className="board-container">
        {['Todo', 'In Progress', 'Done'].map(status => (
          <Droppable key={status} droppableId={status}>
            {(provided) => (
              <div
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                <TaskList
                  title={status}
                  tasks={tasks.filter(t => t.status === status)}
                />
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        ))}
      </div>
    </DragDropContext>
  );
}

5. Next.Js로 날씨 대시보드 만들기

난이도: 쉬움

주요 개념: 외부 API 통합, 지리 정보, 데이터 시각화

현재 날씨와 예보를 보여주는 날씨 대시보드를 만들어보세요.

주요 기능:

현재 날씨 표시
5일 예보
위치 검색
날씨 지도
온도 단위 변환

코드 샘플:

// pages/api/weather.js
export default async function handler(req, res) {
  const { lat, lon } = req.query;
  const API_KEY = process.env.WEATHER_API_KEY;

  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
  );

  const data = await response.json();
  res.status(200).json(data);
}

// components/WeatherDisplay.js
import { useState, useEffect } from 'react';
import WeatherIcon from './WeatherIcon';

export default function WeatherDisplay({ lat, lon }) {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      const response = await fetch(`/api/weather?lat=${lat}&lon=${lon}`);
      const data = await response.json();
      setWeather(data);
    };

    fetchWeather();
  }, [lat, lon]);

  if (!weather) return <div>Loading...</div>;

  return (
    <div>
      <h2>{weather.current.weather[0].description}</h2>
      <WeatherIcon icon={weather.current.weather[0].icon} />
      <p>온도: {weather.current.temp}°C</p>
    </div>
  );
}

마치며

이상으로 Next.Js를 활용한 10가지 프로젝트 아이디어를 소개했습니다. 실습을 통해 Next.Js의 다양한 기능과 개발 방법론을 배우고, 여러분의 포트폴리오를 더욱 빛나게 만들어주세요!

참고한 자료:

추가적으로 도움이 될 만한 링크: