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,
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?
Top comments (2)
Next.js v15 has been released, so there's definitely something new to explore. It's hard to go through complete docs again :(
Honestly, I just scan through for the exact thing I'm looking for.