Build a simple portfolio site to showcase your skills using Next.js and Styled Components.

Ideal for beginners to practice basic routing, styling, and static content deployment.

Set up a portfolio home page in app/page.tsx:

// app/page.tsx
'use client';

import styled from 'styled-components';

const Hero = styled.section`
  padding: 50px;
  background: #F7F4E9;
  text-align: center;
`;

export default function Home() {
  return (
    <Hero>
      <h1>Hi, I’m [Your Name]</h1>
      <p>Web Developer</p>
    </Hero>
  );
}

Use Next.js’s <Image> component for optimized profile photos—set priority for fast loading.

Create a blog using Next.js’s SSG to pre-render posts and Styled Components for a custom look.

Great for learning static site generation, API integration, and responsive design.

Fetch blog posts in app/page.tsx:

// app/page.tsx
'use client';

import styled from 'styled-components';

const Post = styled.article`
  padding: 20px;
  background: #E8E2D1;
  margin-bottom: 20px;
`;

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

export default function Blog({ posts }) {
  return (
    <div>
      {posts.slice(0, 5).map(post => (
        <Post key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </Post>
      ))}
    </div>
  );
}

Add a revalidate option in getStaticProps to refresh posts periodically without rebuilding.

Build a todo app with a Next.js API route for CRUD operations and Styled Components for styling.

Perfect for practicing full-stack development within a single Next.js app.

Create an API route in app/api/todos/route.ts and a styled todo list:

// app/api/todos/route.ts
export async function GET(req) {
  const todos = [{ id: 1, text: 'Learn Next.js' }];
  return new Response(JSON.stringify(todos), { status: 200 });
}

// app/page.tsx
'use client';

import styled from 'styled-components';

const Todo = styled.li`
  padding: 10px;
  background: #1C2526;
  color: #fff;
  margin: 5px 0;
`;

export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/api/todos');
  const todos = await res.json();
  return { props: { todos } };
}

export default function Home({ todos }) {
  return (
    <ul>
      {todos.map(todo => <Todo key={todo.id}>{todo.text}</Todo>)}
    </ul>
  );
}

Use VSCode’s debugger to step through the API route and client code for easier troubleshooting.

Develop a full-featured e-commerce site with Next.js dynamic routes and Styled Components theming.

Use this to master dynamic routing, data fetching, and a cohesive design system.

Set up a product page in app/products/[id]/page.tsx:

// app/products/[id]/page.tsx
'use client';

import styled from 'styled-components';

const ProductCard = styled.div`
  padding: 20px;
  background: #E8E2D1;
  border-radius: 8px;
`;

export async function getStaticPaths() {
  return { paths: [{ params: { id: '1' } }], fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const product = { id: params.id, name: 'Sample Product', price: 29.99 };
  return { props: { product } };
}

export default function Product({ product }) {
  return (
    <ProductCard>
      <h1>{product.name}</h1>
      <p>${product.price}</p>
    </ProductCard>
  );
}

Add a global theme with Styled Components to keep product styles consistent across pages.

Build a user dashboard with server-side rendering for real-time data using Next.js and Styled Components.

Ideal for learning SSR, API integration, and creating interactive, styled UIs.

Fetch user data in app/dashboard/page.tsx:

// app/dashboard/page.tsx
'use client';

import styled from 'styled-components';

const Dashboard = styled.div`
  padding: 30px;
  background: #F7F4E9;
`;

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();
  return { props: { user } };
}

export default function DashboardPage({ user }) {
  return (
    <Dashboard>
      <h1>Welcome, {user.name}</h1>
      <p>Email: {user.email}</p>
    </Dashboard>
  );
}

Use VSCode’s multi-cursor editing to quickly style multiple dashboard elements at once.

Create a blog with user authentication, post creation, and a styled frontend using Next.js and Styled Components.

Perfect as a showcase project to demonstrate full-stack skills and design sensibility.

Set up an auth API in app/api/login/route.ts and a styled login page:

// app/api/login/route.ts
export async function POST(req) {
  const { username } = await req.json();
  return new Response(JSON.stringify({ user: { name: username } }), { status: 200 });
}

// app/login/page.tsx
'use client';

import styled from 'styled-components';

const Form = styled.form`
  padding: 20px;
  background: #E8E2D1;
  border-radius: 8px;
`;

export default function Login() {
  return (
    <Form>
      <input type="text" placeholder="Username" />
      <button>Login</button>
    </Form>
  );
}

Add TypeScript and a global theme to make your project production-ready and maintainable.