intermediate

Introduction to Frontend Development with Next.js

Software Engineering

Build a production-ready task management application with Next.js App Router. Create responsive layouts, fetch and manage data, build validated forms, implement optimistic UI updates, and polish the experience with filtering, state synchronization, and mobile navigation.

See courses

Verified skills you'll gain

INTERMEDIATE

Interacting with Back-end and APIs

INTERMEDIATE

JavaScript Programming and DOM API

INTERMEDIATE

State Management and Dynamic Interactions

Tools you'll use

Nextjs

React

TypeScript

Trusted by learners working at top companies

Turn screen time into skills time

Practice anytime, anywhere with our mobile app.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

You’ll set up the application shell (root and dashboard layouts), then render a dashboard with basic statistics from the backend using SWR. You’ll add a read-only tasks list and introduce a small UI library (Button) to keep styling consistent. Finally, you’ll add a toast system and a robust API client to standardize server responses, plus route-level loading and error UI.

Course 2

Forms, Validation & Creating Tasks

3 lessons

13 practices

You’ll build reusable form inputs and a task form with client-side validation using React Hook Form and Zod. Then you’ll create a “New Task” page to POST data to the backend and show toasts + redirect on success.

See details

Course 3

Detail Page, Editing & Deleting

3 lessons

11 practices

You’ll implement a dynamic task detail page with edit and delete capabilities, plus a “Mark Complete/Incomplete” toggle. You’ll also add optimistic feedback, modal confirmation, and ensure dashboard and list pages always stay in sync after edits, deletions, and new creations.

See details

Course 4

Filters, State Sync & Production Polish

3 lessons

10 practices

You’ll add a filtered tasks view using URL state, synchronize caches across multiple lists, and finish by upgrading the layout with a mobile navigation drawer.

See details

From our community

Hear what our customers have to say about CodeSignal Learn

I'm impressed by the quality and can't stop recommending it. It's also a lot of fun!

Francisco Aguilar Meléndez

Data Scientist

+11

I love that it's personalized. When I'm stuck, I don't have to hope my Google searches come out successful. The AI mentor Cosmo knows exactly what I need.

Faith Yim

Software Engineer

+14

It's an amazing product and exceeded my expectations, helping me prepare for my job interviews. Hands-on learning requires you to actually know what you are doing.

Alex Bush

Full Stack Engineer

I'm really impressed by the AI tutor Cosmo's feedback about my code. It's honestly kind of insane to me that it's so targeted and specific.

Abbey Helterbran

Tech consultant

I tried Leetcode but it was too disorganized. CodeSignal covers all the topics I'm interested in and is way more structured.

Jonathan Miller

Senior Machine Learning Engineer

+12

I'm impressed by the quality and can't stop recommending it. It's also a lot of fun!

Francisco Aguilar Meléndez

Data Scientist

+11

From our community

Hear what our customers have to say about CodeSignal Learn

I'm impressed by the quality and can't stop recommending it. It's also a lot of fun!

Francisco Aguilar Meléndez

Data Scientist

+11

I love that it's personalized. When I'm stuck, I don't have to hope my Google searches come out successful. The AI mentor Cosmo knows exactly what I need.

Faith Yim

Software Engineer

+14

It's an amazing product and exceeded my expectations, helping me prepare for my job interviews. Hands-on learning requires you to actually know what you are doing.

Alex Bush

Full Stack Engineer

I'm really impressed by the AI tutor Cosmo's feedback about my code. It's honestly kind of insane to me that it's so targeted and specific.

Abbey Helterbran

Tech consultant

I tried Leetcode but it was too disorganized. CodeSignal covers all the topics I'm interested in and is way more structured.

Jonathan Miller

Senior Machine Learning Engineer

+12

I'm impressed by the quality and can't stop recommending it. It's also a lot of fun!

Francisco Aguilar Meléndez

Data Scientist

+11

Introduction to Frontend Development with Next.js

Verified skills you'll gain

Trusted by learners working at top companies

Turn screen time into skills time

Join the 1M+ learners on CodeSignal

Certificate of Achievement

From our community

Other paths you may like

From our community