Dumebi Okolo

Posted on Oct 23 • Originally published at thehandydevelopersguide.com

10 Next.Js Project Ideas With Code Samples!

#webdev #beginners #nextjs #react

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

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;

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

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

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

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

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

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

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

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

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,