https://github.com/shahramshakiba/nextjs-basic

NextJS Basic Course | My primary objective is to provide an overview of the core features of NextJS, demonstrating how it streamlines the process of building React Apps (⚫ NextJS)
https://github.com/shahramshakiba/nextjs-basic

basics nextjs nextjs-starter

Last synced: 2 days ago
JSON representation

NextJS Basic Course | My primary objective is to provide an overview of the core features of NextJS, demonstrating how it streamlines the process of building React Apps (⚫ NextJS)

• Host: GitHub
• URL: https://github.com/shahramshakiba/nextjs-basic
• Owner: ShahramShakiba
• Created: 2024-04-10T08:06:08.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-16T08:27:46.000Z (7 months ago)
• Last Synced: 2024-04-16T21:10:06.272Z (7 months ago)
• Topics: basics, nextjs, nextjs-starter
• Language: JavaScript
• Homepage: https://next-js-basic-shahram.vercel.app
• Size: 105 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#     Next.js 

###   _Description_

> ### _Next.js_ is a React framework for building full-Stack Web Applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. 

- 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.

  




> [!IMPORTANT]

>> #### Key Features & Benefits : 

####    _Server-side Rendering_

- 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

####    _File-based Routing_

- Define pages and routes with files and folders instead of code

- Less code, less work, highly understandable

####    _Fullstack Capabilities_

- Easily add Backend (Server-side) code to your Next/React apps

- Storing data, getting data, authentication etc. cab be added to your React projects




***

###    _React/Next Meetups_  

- #### 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_:  

####    _File-based Routing & Page Pre-rendering_

- _Install_: _` npx create-next-app `_  _` npx 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 & Adding on API_

- 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!

 



https://github.com/ShahramShakiba/NextJS-Basic/assets/110089830/76d1cea9-3c9b-4cd0-aeb4-3aaf58c05264

  
 

  

##  Find me around the Web