Full Stack Next.JS Bootcamp 6 Days
The 6-day Full Stack Next.js Bootcamp provides a practical, hands-on learning experience to build, optimize, and deploy full-stack web applications. Participants will start with the basics of Next.js, including its routing, components, and styling. They will then progress to integrating databases like MongoDB, creating API routes, and implementing authentication with tools like NextAuth.js. The course also covers advanced topics like optimization, environment management, and deployment to platforms like Vercel. By the end, attendees will have developed a fully functional blog application with modern features and best practices.
Cost: NRs. 1500/-
Timing: 3PM-6PM (3HRs a day)
Our Trainer: Binod Raj Dhami (More than 5 years of experience in Software Development)
What will you Learn?
Introduction to Next.js and Setting Up the Environment
- Introduction to Full Stack Development with Next.js
- What is Next.js and why use it?
- Advantages of Next.js: server-side rendering, static generation, API routes, etc.
- Setting Up the Development Environment
- Install Node.js, npm, and create a Next.js project.
- Project structure overview: pages, components, public, styles, etc.
- Introduction to Next.js Pages and Routing
- Creating pages and automatic routing.
- Dynamic routes: building URLs with parameters.
- Link component for navigation.
- Hands-On Project: Basic Website Structure
- Set up a basic multi-page website (e.g., Homepage, About, Contact).
Working with Components, Styling, and Data Fetching
- Creating Reusable Components
- Functional components and props.
- Layout components for a consistent structure across pages.
- Styling in Next.js
- Global vs. local CSS.
- Using CSS Modules and Tailwind CSS.
- Introduction to styled-components (optional).
- Data Fetching Methods
- getStaticProps for static generation.
- getServerSideProps for server-side rendering.
- Client-side data fetching with useEffect and SWR (optional).
- Hands-On Project: Blog Application
- Set up a basic blog structure.
- Create components like Header, Footer, and BlogPost.
- Fetch blog posts data and render it on the homepage.
API Routes and Integrating a Database (e.g., MongoDB)
- API Routes in Next.js
- Setting up basic API routes.
- Creating RESTful endpoints.
- Connecting Next.js to a Database
- Introduction to MongoDB (or Firebase/Prisma as an alternative).
- Setting up a MongoDB cluster and connecting to Next.js.
- Using Mongoose (or Prisma ORM) to handle database interactions.
- Hands-On Project: Blog Application with a Database
- Modify the blog application to fetch posts from the database.
- Add CRUD (Create, Read, Update, Delete) operations through API routes.
Authentication and Authorization
- Introduction to Authentication in Next.js
- JWT (JSON Web Tokens) and session-based authentication.
- Authentication libraries: NextAuth.js or Firebase Authentication.
- Setting Up NextAuth.js
- Implement Google, GitHub, or email-based authentication.
- Create secure API routes with authorization.
- Role-Based Authorization
- Define user roles (e.g., Admin, User).
- Protect certain pages and API routes based on user roles.
- Hands-On Project: User Accounts and Permissions in Blog App
- Add login functionality.
- Protect the "Create Post" route to allow only logged-in users.
Deployment, Optimization, and Project Wrap-Up
- Optimizing Next.js Applications
- Code splitting, image optimization, and caching.
- Using next/image for image optimization.
- Implementing lazy loading for components.
- Environment Variables and Secret Management
- Setting up environment variables for different environments (dev, production).
- Securing sensitive information.
- Deployment Options for Next.js
- Set up the environment for production.
- Deploy the blog application to Vercel
