
Create static pages and master Next.js routing using the app directory and page.tsx. Explore home, projects, and contact us routes, dynamic pages, and basic query handling with Next.js link components.
Customize not-found error pages in a Next.js 13 app by creating a dedicated not-found.tsx in the app directory and designing a bespoke page for when a route is missing.
Learn how Next.js middleware runs code before every request to enable rewrites, redirects, and header changes, and how to configure it with a middleware.ts file.
Explore how Next.js 13 client components support interactions such as button clicks and alerts, while server components do not support hooks like use state and use effect.
Learn how client components access browser resources like local storage and cookies, while server components run on the server and cannot access the browser due to prerendering.
Learn to access query strings in Next.js 13 API routes by using URL search params and get to retrieve individual values such as name and age.
Learn how to connect Next.js API routes to MongoDB using mongoose and dotenv, including setting up MongoDB Atlas, environment variables, and a reusable db connection function.
Explore building a get user by id API using router params and the user model's findById, handle 'user not found' errors, and test with valid and invalid ids.
Explore how Next.js handles server-side data fetching with fetch, including caching and revalidation options like no cache, force cache, no store, and a programmable revalidate duration.
Build a feature-rich task manager project in Next.js 13 bootcamp, implementing authentication with JWT, middlewares, and MongoDB-backed CRUD across registration, login, home, and task form pages.
Design and implement a centered registration form in a Next.js 13 bootcamp app, then mirror the styling for a login form, using a primary theme color and global input styles.
Hello! Welcome to the Next.js 13 Bootcamp - where we'll take you from scratch to building a full-stack app. As you may be aware, Next.js has emerged as one of the most popular web development frameworks in 2023. So, if you come from a web background, learning Next.js would undoubtedly be a beneficial choice for you.
These course will be having the duration of total 10 Hours . In that we will use 50% of the time to cover all the topics in Next JS and then remaining 50% of the time we will build a full stack task manager project by implementing all the concepts which we cover in first 5 Hours.
Topics we will cover in first 5 Hours
What is Next.js? How is it different from React.js? What are the advantages of Next.js over React.js?
Folder Structure of New Next JS App
Understanding next js static and dynamic pages
App Router Features like Layout , Middleware , Errors
Next JS Sever Components and Client Components
Rendering , Data Fetching , Performing interactions in both client and server components
Next JS API's
Difference between Next JS API's and Third party server API's
Next JS with Mongo DB
Connecting to Mongo DB and Performing all CRUD operations
Working with POSTMAN and Mongo DB
Implementing Redux Toolkit to manage global state
Project - Task Manager
Login and Register Pages using Tailwind CSS
Authentication API's with JWT Tokens for authorization.
Protecting Routes and API's from unauthorized users.
Tasks CRUD operation with Mongo DB and Next JS APIS
Dashboard with Tasks Reports
Filters using Server Side Rendering
Deployment to Vercel
Next.js is a popular JavaScript framework for building server-side-rendered React applications. Next.js v13 was released by Vercel at the Next.js conference in October 2022, bringing many new features and improvements. Understanding the complexities of this latest version is essential for developers to utilize its capabilities and build efficient and scalable applications effectively. This article will cover various aspects of the new version, including its unique features, changes from previous versions, and tips for overcoming any challenges that might arise while working with it.
Prerequisites
Must have good knowledge on how React Framework works behind the scenes
Basic knowledge about API's , Endpoints , Request , Response is required to understand the Next JS
Strong knowledge on HTML , CSS , Javascript
A computer / laptop of atleast 4GB Ram with good internet connection