- It aids in creating web apps with server-rendering and statically-generated web applications, offering features to improve development and performance.
- You still write React codes and use React features. NextJS just enhances your React apps and adds more features.
- Automatic page re-rendering - Great for SEO and initial load
- Blending Client-side and Server-side:
- Fetch data on the server and render finished pages
- Define pages and routes with files and folders instead of code
- Less code, less work, highly understandable
- Easily add Backend (Server-side) code to your Next/React apps
- Storing data, getting data, authentication etc. cab be added to your React projects
-
In this project, my primary objective is to provide an overview of the core features of NextJS, demonstrating how it streamlines the process of building React Apps. This includes discussing how to create pages, fetch data for pre-rendering, run server-side code, connect to MongoDB, and utilize API Routes to incorporate a custom REST API within the React project.
- This setup enables users to seamlessly send requests for storing new meetups.
Which Concepts in Have I Covered:
- Install:
npx create-next-appnpx create-next-app@latest - Simplified Routing with File-based Routing
- Adding Nested Paths & Pages (Nested Routes)
- Creating Dynamic Pages (with Parameters)
- Extracting Dynamic Parameter Values
- Linking Between Pages
- The Layout Wrapper in _app.js File
- Data fetching for pre-rendering using getStaticProps() for static pages
- revalidate Static Site Generation (SSG)
- Exploring Server-side Rendering (SSR) with getServerSideProps()
- Working with Params for SSG Data Fetching
- Preparing Paths with getStaticPaths & Working With Fallback Pages
- Working with
MongoDB - Sending & getting HTTP Requests To Our API Routes
- Adding Head Metadata
Give it a go in real-time and give me a Star 
React/Next Meetups
Warning
NextJS Deployment Failed!
NextJS-Basic.mp4
