Next.js From Scratch 2024 from Udemy

This is a project based course that will teach you how to use Next.js in the real world. We use all of the latest features in Next 14 to build a property rental website where users can browse, search and manage property listings.

Next.js is the future of React. Server-side rendered websites and static websites are becoming the norm over single page applications and Next.js allows you to build both with ease. Learning Next will give you a huge advantage when it comes to modern web development.

The project will have the following features:

User authentication with Google & Next Auth
User authorization
RESTful API routes
Route protection
User profile with user listings
Property Listing CRUD
Property image upload (Multiple)
Cloudinary integration
Property search
Internal messages with 'unread' notifications
Photoswipe image gallery
Mapbox maps
Toast notifications
Property bookmarking / saved properties
Property sharing to social media
Loading spinners
Responsive design (Tailwind)
Custom 404 page

This course will give you all of the skills that you need to start creating your own full stack Next.js applications with API routes.

Here are some of the packages and technologies that we will be using:

Next.js 14
React
Tailwind CSS
MongoDB
Mongoose
Next Auth
React Icons
Photoswipe
Cloudinary
Mapbox
React Map GL
React Geocode
React Spinners
React Toastify
React Share

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches Next.js, a modern framework for web development, which is a strong skill for job seekers

Covers user authentication with Google and Next Auth, a popular solution in the industry

Uses MongoDB and Mongoose, widely-used technologies for database management

Integrates with Cloudinary, a leading image hosting and manipulation platform, providing professional image management

Teaches modern design principles using Tailwind CSS, a popular styling framework

Requires learners to have basic React.js knowledge, which may limit accessibility for beginners

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js From Scratch 2024 with these activities:

Organize and review class materials

Show steps

Stay organized and enhance retention by compiling and reviewing notes, assignments, and other course materials.

Browse courses on Next.js

Show steps

Create a system for organizing materials
Regularly review and summarize key concepts

Review core React concepts

Show steps

Strengthen your foundation by reviewing core React concepts, ensuring a solid understanding before delving into Next.js.

Browse courses on React

Show steps

Review React documentation or tutorials
Take practice quizzes or solve coding problems

Practice Using Next Auth for User Authentication

Show steps

Get hands-on experience with Next Auth to solidify your understanding of user authentication in Next.js applications.

Browse courses on User Authentication

Show steps

Set up a new Next.js project
Install and configure Next Auth
Implement the login and signup flow
Test the user authentication functionality

Five other activities

Expand to see all activities and additional details

Show all eight activities

Join a study group or online forum

Show steps

Engage with peers, discuss concepts, and gain diverse perspectives, fostering a deeper understanding of Next.js.

Browse courses on Next.js

Show steps

Find a study group or online forum
Participate in discussions and ask questions
Share knowledge and collaborate on projects

Build a RESTful API Route for Property Listings

Show steps

Develop a RESTful API route to manage property listings, enhancing your understanding of server-side data handling in Next.js.

Browse courses on RESTful APIs

Show steps

Create a new API route file
Define the API endpoints and request handlers
Implement database operations using MongoDB
Test the API route using Postman or a similar tool

Follow a Next.js tutorial series

Show steps

Supplement your understanding of Next.js by following guided tutorials, reinforcing the framework's capabilities.

Browse courses on Next.js

Show steps

Find a comprehensive Next.js tutorial series
Follow the tutorials step-by-step, building practice projects
Experiment with the concepts learned in the tutorials

Solve Next.js coding challenges

Show steps

Test your understanding of Next.js by solving coding challenges, improving your problem-solving skills.

Browse courses on Next.js

Show steps

Find online coding challenges or platforms
Solve challenges related to Next.js concepts
Review your solutions and identify areas for improvement

Create a React Next.js portfolio project

Show steps

Practice building a full-stack web application with Next.js, solidifying your understanding of the framework's key concepts.

Browse courses on Next.js

Show steps

Plan the project's features and design
Set up the Next.js project and install dependencies
Create the frontend using React components
Implement dynamic routing and data fetching
Deploy the project to a hosting platform

Career center

Learners who complete Next.js From Scratch 2024 will develop knowledge and skills that may be useful to these careers:

Front-End Engineer

Front-End Engineers design and build the user interface and user experience of websites and web applications. This course provides a strong foundation in the core concepts of front-end development, as well as modern technologies and best practices. You will learn how to use Next.js, React, and Tailwind CSS to create responsive, interactive, and user-friendly websites and applications.

See salaries and explore the career path for Front-End Engineer

Full Stack Engineer

Full-Stack Engineers are responsible for both the front-end and back-end development of web applications. This course provides a comprehensive overview of the full-stack development process, including server-side rendering, RESTful API routes, and database integration. You will learn how to use Next.js, React, MongoDB, and Mongoose to build complete web applications.

See salaries and explore the career path for Full Stack Engineer

React Developer

React Developers specialize in building user interfaces for web and mobile applications using the React library. This course will teach you the fundamentals of React, as well as advanced concepts such as state management, routing, and performance optimization. You will learn how to use Next.js to create server-rendered React applications.

See salaries and explore the career path for React Developer

Software Engineer

Software Engineers design, develop, and maintain software systems. This course provides a foundation in software engineering principles and best practices, as well as modern technologies and tools. You will learn how to use Next.js, React, and other technologies to build scalable, reliable, and maintainable software systems.

See salaries and explore the career path for Software Engineer

Web Developer

Web Developers are responsible for the development and maintenance of websites and web applications. This course provides a comprehensive overview of web development technologies and best practices, including HTML, CSS, JavaScript, and Next.js. You will learn how to create responsive, interactive, and user-friendly websites and applications.

See salaries and explore the career path for Web Developer

User Experience Designer

User Experience Designers focus on the design and improvement of the user experience of websites and applications. This course will introduce you to the principles of user experience design, as well as tools and techniques for conducting user research and testing. You will learn how to use Next.js to create user-centered websites and applications.

See salaries and explore the career path for User Experience Designer

Product Designer

Product Designers are responsible for the conception, design, and development of products and services. This course will introduce you to the principles of product design, as well as tools and techniques for user research, prototyping, and testing. You will learn how to use Next.js to create user-centered products and services.

See salaries and explore the career path for Product Designer

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make informed decisions. This course provides a foundation in data analysis techniques and tools, as well as how to use Next.js to build data-driven applications. You will learn how to extract insights from data and communicate them effectively.

See salaries and explore the career path for Data Analyst

Machine Learning Engineer

Machine Learning Engineers build and deploy machine learning models to solve real-world problems. This course provides a foundation in machine learning concepts and algorithms, as well as how to use Next.js to build and deploy machine learning models. You will learn how to train and evaluate machine learning models and use them to make predictions.

See salaries and explore the career path for Machine Learning Engineer

Data Scientist

Data Scientists use data to solve business problems and make predictions. This course provides a foundation in data science techniques and tools, as well as how to use Next.js to build data-driven applications. You will learn how to collect, clean, and analyze data, and use it to build predictive models.

See salaries and explore the career path for Data Scientist

Cloud Engineer

Cloud Engineers design, build, and manage cloud infrastructure. This course provides a foundation in cloud computing concepts and technologies, as well as how to use Next.js to build cloud-based applications. You will learn how to provision and manage cloud resources, and use them to build scalable, reliable, and cost-effective applications.

See salaries and explore the career path for Cloud Engineer

DevOps Engineer

DevOps Engineers bridge the gap between development and operations teams. This course provides a foundation in DevOps principles and practices, as well as how to use Next.js to build and deploy applications in a continuous delivery pipeline. You will learn how to automate build, test, and deployment processes, and use monitoring and logging tools to improve the reliability and performance of applications.

See salaries and explore the career path for DevOps Engineer

Information Security Analyst

Information Security Analysts protect organizations from cyber threats. This course provides a foundation in information security concepts and technologies, as well as how to use Next.js to build secure applications. You will learn how to identify and mitigate security vulnerabilities, and implement security measures to protect applications and data.

See salaries and explore the career path for Information Security Analyst

Quality Assurance Engineer

Quality Assurance Engineers ensure the quality of software products. This course provides a foundation in quality assurance principles and practices, as well as how to use Next.js to build and test applications. You will learn how to write test cases, perform testing, and report on the quality of applications.

See salaries and explore the career path for Quality Assurance Engineer

Technical Writer

Technical Writers create and maintain documentation for software products. This course provides a foundation in technical writing principles and practices, as well as how to use Next.js to build and deploy documentation. You will learn how to write clear and concise documentation, and use tools to manage and publish documentation.

See salaries and explore the career path for Technical Writer

Next.js From Scratch 2024

14 deals to help you save

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses