DEV Community

Cover image for 10 Next.Js Project Ideas With Code Samples!
Dumebi Okolo
Dumebi Okolo

Posted on • Originally published at thehandydevelopersguide.com

10 Next.Js Project Ideas With Code Samples!

Are you a web developer looking to master Next.Js while building an impressive portfolio? You're in the right place. Here are 10 practical projects that will help you master key concepts while creating real-world applications.


1. Build A Blog With Next.Js

  • Difficulty: Easy
  • Key Concepts: File-based routing, Markdown processing, Static Site Generation (SSG)

Build a personal blog that converts Markdown files into blog posts. This project will teach you content management, metadata handling, and static site generation.

Key Features:

  • Markdown-based blog posts

  • Category filtering

  • Reading time estimation

  • SEO optimization

  • Responsive design

Code Sample For Blog With Next.Js

// 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

2. Build A Real-time Chat Application With Next.Js

  • Difficulty: Medium
  • Key Concepts: WebSocket integration, Real-time updates, User authentication

Create a real-time chat application using Next.js and Socket.io. This project will teach you about real-time communication and state management.

Key Features:

  • Real-time messaging

  • User authentication

  • Online status indicators

  • Message history

  • Typing indicators

Code Sample For Real-time Chat Application With Next.Js

// 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;
Enter fullscreen mode Exit fullscreen mode

3. Build An E-commerce Product Page With Next.Js

  • Difficulty: Medium
  • Key Concepts: API Routes, Data fetching, Cart management

Build a product page with dynamic pricing, image galleries, and cart functionality.

Key Features:

  • Product image gallery

  • Size/variant selection

  • Add-to-cart functionality

  • Stock management

  • Price calculations

Code Sample To Build An E-commerce Product Page With Next.Js

// 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}
        >
          Add to Cart
        </button>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

4. Build A Task Management Dashboard With Next.Js

  • Difficulty: Medium
  • Key Concepts: CRUD operations, Data persistence, Drag-and-drop

Create a Trello-like task management dashboard with drag-and-drop functionality.

Key Features:

  • Task creation and editing

  • Drag-and-drop organization

  • Task categories/lists

  • Due dates

  • Priority levels

Code Sample To Build A Task Management Dashboard With Next.Js

// 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

5. Build A Weather Dashboard With Next.Js

  • Difficulty: Easy
  • Key Concepts: External API integration, Geolocation, Data visualization

Build a weather dashboard that shows current conditions and forecasts.

Key Features:

  • Current weather display

  • 5-day forecast

  • Location search

  • Weather maps

  • Temperature unit conversion

Code Sample To Build A Weather Dashboard With Next.Js

// 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(() => {
    fetch(`/api/weather?lat=${lat}&lon=${lon}`)
      .then(r => r.json())
      .then(setWeather);
  }, [lat, lon]);

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

  return (
    <div className="weather-container">
      <div className="current-weather">
        <WeatherIcon code={weather.current.weather[0].id} />
        <h2>{Math.round(weather.current.temp)}°C</h2>
        <p>{weather.current.weather[0].description}</p>
      </div>
      <div className="forecast">
        {weather.daily.slice(1, 6).map(day => (
          <div key={day.dt} className="forecast-day">
            <WeatherIcon code={day.weather[0].id} />
            <p>{Math.round(day.temp.max)}°</p>
          </div>
        ))}
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

6. Build A Recipe Book Application With Next.Js

  • Difficulty: Medium
  • Key Concepts: Image uploads, Search functionality, Data relationships

Create a digital recipe book where users can store and share their favorite recipes.

Key Features:

  • Recipe CRUD operations

  • Image uploads

  • Category filtering

  • Search functionality

  • Cooking timer widget

Code Sample To Build A Receipe Book With Next.Js

// components/RecipeForm.js
import { useState } from 'react';
import ImageUpload from './ImageUpload';

export default function RecipeForm({ onSubmit }) {
  const [recipe, setRecipe] = useState({
    title: '',
    ingredients: [''],
    instructions: [''],
    cookingTime: '',
    image: null
  });

  const addIngredient = () => {
    setRecipe(prev => ({
      ...prev,
      ingredients: [...prev.ingredients, '']
    }));
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      onSubmit(recipe);
    }}>
      <input
        type="text"
        value={recipe.title}
        onChange={(e) => setRecipe(prev => ({
          ...prev,
          title: e.target.value
        }))}
        placeholder="Recipe Title"
      />

      <div className="ingredients-list">
        {recipe.ingredients.map((ing, index) => (
          <input
            key={index}
            type="text"
            value={ing}
            onChange={(e) => {
              const newIngredients = [...recipe.ingredients];
              newIngredients[index] = e.target.value;
              setRecipe(prev => ({
                ...prev,
                ingredients: newIngredients
              }));
            }}
            placeholder="Add ingredient"
          />
        ))}
        <button type="button" onClick={addIngredient}>
          Add Ingredient
        </button>
      </div>

      <ImageUpload
        onUpload={(imageUrl) => setRecipe(prev => ({
          ...prev,
          image: imageUrl
        }))}
      />

      <button type="submit">Save Recipe</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

7. Build A Job Application Tracker With Next.Js

  • Difficulty: Medium
  • Key Concepts: Complex state management, Data visualization, Calendar integration

Build a tool to help job seekers track their applications and interviews.

Key Features:

  • Application status tracking

  • Interview scheduler

  • Document management

  • Status analytics

  • Email notifications

Code Sample To Build An Application Tracker With Next.Js

// pages/dashboard.js
import { useState } from 'react';
import Calendar from '../components/Calendar';
import StatusChart from '../components/StatusChart';

export default function Dashboard({ applications }) {
  const [filter, setFilter] = useState('all');

  const stats = applications.reduce((acc, app) => ({
    ...acc,
    [app.status]: (acc[app.status] || 0) + 1
  }), {});

  return (
    <div className="dashboard-container">
      <div className="stats-container">
        <StatusChart data={stats} />
        <div className="quick-stats">
          <div className="stat-card">
            <h3>Total Applications</h3>
            <p>{applications.length}</p>
          </div>
          <div className="stat-card">
            <h3>Interviews Scheduled</h3>
            <p>{applications.filter(a => a.interviewDate).length}</p>
          </div>
        </div>
      </div>

      <Calendar 
        events={applications
          .filter(a => a.interviewDate)
          .map(a => ({
            title: `Interview with ${a.company}`,
            date: a.interviewDate,
            type: 'interview'
          }))}
      />

      <ApplicationList
        applications={applications}
        filter={filter}
        onFilterChange={setFilter}
      />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

8. Build A Personal Portfolio With Next.Js

  • Difficulty: Easy
  • Key Concepts: SEO optimization, Animations, Performance optimization

Create a modern portfolio website to showcase your projects and skills.

Key Features:

  • Project showcase

  • Skills section

  • Contact form

  • Blog integration

  • Performance optimization

Code Sample To Build A Personal Portfolio With Next.Js

// pages/index.js
import { motion } from 'framer-motion';
import Head from 'next/head';
import Project from '../components/Project';
import Contact from '../components/Contact';

export default function Portfolio({ projects }) {
  return (
    <>
      <Head>
        <title>Your Name - Portfolio</title>
        <meta 
          name="description" 
          content="Full-stack developer specializing in React and Next.js"
        />
      </Head>

      <motion.section
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="hero"
      >
        <h1>Hi, I'm [Your Name]</h1>
        <p>Full-stack Developer</p>
      </motion.section>

      <section className="projects">
        {projects.map(project => (
          <motion.div
            key={project.id}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <Project {...project} />
          </motion.div>
        ))}
      </section>

      <Contact />
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

9. Build A Movie Discovery App With Next.Js

  • Difficulty: Medium
  • Key Concepts: Infinite scrolling, External API integration, Responsive design

Build a movie discovery platform using the TMDB API with advanced filtering and search.

Key Features:

  • Movie search

  • Genre filtering

  • Infinite scroll

  • Movie details

  • Watchlist management

Code Sample To Build A Movie Discovery App With Next.Js

// hooks/useInfiniteMovies.js
import { useState, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';

export function useInfiniteMovies(searchQuery) {
  const [movies, setMovies] = useState([]);
  const [page, setPage] = useState(1);
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      fetchMoreMovies();
    }
  }, [inView]);

  const fetchMoreMovies = async () => {
    const response = await fetch(
      `/api/movies?query=${searchQuery}&page=${page}`
    );
    const newMovies = await response.json();

    setMovies(prev => [...prev, ...newMovies]);
    setPage(prev => prev + 1);
  };

  return { movies, ref };
}

// components/MovieGrid.js
export default function MovieGrid({ searchQuery }) {
  const { movies, ref } = useInfiniteMovies(searchQuery);

  return (
    <div className="movie-grid">
      {movies.map(movie => (
        <MovieCard key={movie.id} movie={movie} />
      ))}
      <div ref={ref} className="loading-trigger" />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

10. Build A Social Media Dashboard With Next.Js

  • Difficulty: Hard
  • Key Concepts: Multiple API integration, Real-time updates, Data aggregation

Create a dashboard that aggregates data from multiple social media platforms.

Key Features:

  • Multi-platform integration

  • Analytics tracking

  • Post scheduling

  • Engagement metrics

  • Content calendar

Code Sample To Build A Social Media Dashboard With Next.Js

// pages/dashboard.js
import { useState, useEffect } from 'react';
import { TwitterTimelineEmbed } from 'react-twitter-embed';
import InstagramFeed from '../components/InstagramFeed';
import AnalyticsChart from '../components/AnalyticsChart';

export default function Dashboard() {
  const [metrics, setMetrics] = useState(null);
  const [selectedPlatform, setSelectedPlatform] = useState('all');

  useEffect(() => {
    fetchMetrics(selectedPlatform);
  }, [selectedPlatform]);

  return (
    <div className="dashboard-grid">
      <div className="metrics-overview">
        <h2>Performance Overview</h2>
        {metrics && (
          <div className="metrics-cards">
            <MetricCard
              title="Total Engagement"
              value={metrics.totalEngagement}
              change={metrics.engagementChange}
            />
            <MetricCard
              title="Followers Growth"
              value={metrics.followersGrowth}
              change={metrics.followersChange}
            />
          </div>
        )}
      </div>

      <div className="content-streams">
        <div className="twitter-stream">
          <TwitterTimelineEmbed
            sourceType="profile"
            screenName="YOURUSERNAME"
            options={{ height: 400 }}
          />
        </div>
        <InstagramFeed />
      </div>

      <AnalyticsChart data={metrics?.chartData} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Next Steps

The code samples listed in this article are neither finished nor error-free. The reason is to have you do some of the work yourself. There is still work needed to make your app production-ready. Nonetheless, this article provides a very good guide. The code samples also serve as a helpful resource.

Also,

  • Start Simple: Start with projects 1, 5, or 8 if you're new to Next.Js

  • Customize: Add your own features and styling to make each project unique

  • Document: Write clear documentation and README files for each project

  • Deploy: Use Vercel or similar platforms to make your projects live

  • Share: Add your projects to GitHub and share them with the community

  • Follow The Handy Developers' Guide for more Next.Js tutorials and tips

These projects will help you build a strong foundation in Next.js while creating meaningful additions to your portfolio.


Have you enjoyed this tutorial? Follow us on LinkedIn to never miss a beat!

Did you know that The Handy Developers Guide has an AI assistant to aid you in your learning and understanding of articles?

ask thdg

Top comments (2)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

Next.js v15 has been released, so there's definitely something new to explore. It's hard to go through complete docs again :(

Collapse
 
dumebii profile image
Dumebi Okolo

Honestly, I just scan through for the exact thing I'm looking for.