{"id":20555093,"url":"https://github.com/shahramshakiba/nextjs-basic","last_synced_at":"2026-05-17T17:02:51.675Z","repository":{"id":232617103,"uuid":"784621156","full_name":"ShahramShakiba/NextJS-Basic","owner":"ShahramShakiba","description":"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  (⚫Next.js).","archived":false,"fork":false,"pushed_at":"2024-04-16T08:27:46.000Z","size":108,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T06:33:44.016Z","etag":null,"topics":["basics","nextjs","nextjs-starter"],"latest_commit_sha":null,"homepage":"https://next-js-basic-shahram.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShahramShakiba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-10T08:06:08.000Z","updated_at":"2024-09-09T15:32:24.000Z","dependencies_parsed_at":"2024-04-14T09:25:11.592Z","dependency_job_id":"30dc4f02-63d7-43f1-b7d8-12881150d20b","html_url":"https://github.com/ShahramShakiba/NextJS-Basic","commit_stats":null,"previous_names":["shahramshakiba/nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ShahramShakiba/NextJS-Basic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FNextJS-Basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FNextJS-Basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FNextJS-Basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FNextJS-Basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShahramShakiba","download_url":"https://codeload.github.com/ShahramShakiba/NextJS-Basic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShahramShakiba%2FNextJS-Basic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274487231,"owners_count":25294480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-10T02:00:12.551Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basics","nextjs","nextjs-starter"],"created_at":"2024-11-16T03:16:17.969Z","updated_at":"2026-05-17T17:02:46.633Z","avatar_url":"https://github.com/ShahramShakiba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" /\u003e \u0026nbsp; Next.js \u003cimg src=\"https://skillicons.dev/icons?i=nextjs\" height=\"35\" alt=\"nextjs logo\"  /\u003e\n\n\u003c!----------------------------------------- Description ----------------------------------------\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" width=\"40\" height=\"40\" /\u003e\u0026nbsp; _Description_\n\n\u003e ### _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. \n- It aids in creating web apps with server-rendering and statically-generated web applications, offering features to improve development and performance.\n- You still write React codes and use React features. NextJS just enhances your React apps and adds more features.\n  \n\u003cbr/\u003e\n\n\u003e [!IMPORTANT]\n\u003e\u003e #### Key Features \u0026 Benefits : \n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _Server-side Rendering_\n- Automatic page re-rendering - Great for SEO and initial load\n- Blending Client-side and Server-side:\n  - Fetch data on the server and render finished pages\n\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _File-based Routing_\n- Define pages and routes with files and folders instead of code\n- Less code, less work, highly understandable\n\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _Fullstack Capabilities_\n- Easily add Backend (Server-side) code to your Next/React apps\n- Storing data, getting data, authentication etc. cab be added to your React projects\n\n\u003cbr/\u003e\n\n***\n\u003c!--===================== React / Next Meetups =============================--\u003e\n### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Laptop.webp\" alt=\"Laptop\" width=\"35\" height=\"30\"  /\u003e \u0026nbsp; _React/Next Meetups_  \u003cimg src=\"https://skillicons.dev/icons?i=react\" height=\"40\" alt=\"react logo\" width=\"20\"  /\u003e\n- #### 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.\n-  This setup enables users to seamlessly send requests for storing new meetups. \u003cbr/\u003e\u003cbr/\u003e\n \n\n\u003e _Which Concepts in Have I Covered_:  \n\n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _File-based Routing \u0026 Page Pre-rendering_\n- _Install_: _` npx create-next-app `_  _` npx create-next-app@latest `_\n-  Simplified Routing with File-based Routing\n-  Adding Nested Paths \u0026 Pages (Nested Routes)\n-  Creating Dynamic Pages (with Parameters)\n-  Extracting Dynamic Parameter Values\n-  Linking Between Pages\n-  The Layout Wrapper in _app.js File \n#### \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Bubbles.png\" alt=\"Bubbles\" height=\"20\" /\u003e \u0026nbsp; _Data Fetching \u0026 Adding on API_\n- Data fetching for pre-rendering using getStaticProps() for static pages\n- _revalidate_ Static Site Generation (SSG) \n- Exploring Server-side Rendering (SSR) with getServerSideProps()\n- Working with Params for SSG Data Fetching\n- Preparing Paths with getStaticPaths \u0026 Working With Fallback Pages\n- Working with ` MongoDB `\n- Sending \u0026 getting HTTP Requests To Our API Routes\n- Adding Head Metadata\n\n \n\u003cbr/\u003e\n\n\u003c!-------- try it live --------\u003e\n#### _Give it a go in real-time and give me a Star_ \u0026nbsp; \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png\" alt=\"Glowing Star\" width=\"25\"  /\u003e \u003ca href=\"\" target=\"_blank\"\u003e \u0026nbsp; _React/Next Meetups_ \u003c/a\u003e \n\u003e [!WARNING]\n\u003e NextJS Deployment Failed!\n\n\n \n\u003c!--------- Video ---------\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Telegram-Animated-Emojis/main/Objects/Clapper%20Board.webp\" alt=\"Clapper Board\" width=\"35\" /\u003e\n\n\n\nhttps://github.com/ShahramShakiba/NextJS-Basic/assets/110089830/76d1cea9-3c9b-4cd0-aeb4-3aaf58c05264\n\n\n\n  \u003cbr/\u003e \n  \n\u003c!--======================= Social Media ===========================--\u003e\n## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/People%20with%20professions/Man%20Detective%20Light%20Skin%20Tone.png\" alt=\"Man Detective Light Skin Tone\" width=\"65\" /\u003e Find me around the Web  \n\u003ca href=\"https://www.linkedin.com/in/shahramshakiba/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/linkedin/default.svg\" width=\"52\" height=\"40\" alt=\"linkedin logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://t.me/ShahramShakibaa\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/telegram/default.svg\" width=\"52\" height=\"40\" alt=\"telegram logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://wa.me/message/LM2IMM3ABZ7ZM1\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/whatsapp/default.svg\" width=\"52\" height=\"40\" alt=\"whatsapp logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://instagram.com/shahram.shakibaa?igshid=MzNlNGNkZWQ4Mg==\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/instagram/default.svg\" width=\"52\" height=\"40\" alt=\"instagram logo\"  /\u003e\n  \u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://twitter.com/ShahramShakibaa\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/twitter/default.svg\" width=\"52\" height=\"40\" alt=\"twitter logo\"  /\u003e\n  \u003c/a\u003e\n\n\n\u003c!--==== MongoDB\n\n01. https://www.mongodb.com/atlas\n02. Try Free\n03. Sign up / login\n04. Deployment - Database -\u003e Create\n05. Choose Shared (it's free)\n06. pick a region\n07. Cluster Tier -\u003e MO-Sandbox\n08. then click Create Cluster\n\n09. Security - Network Access -\u003e Add IP A ddress\n10. enter your local-machin IP address \n11. Database Access - Create a User\n\n12. Database - click, Connect(on your new created cluster)\n13. choose, Drivers\n\n14. in your terminal: npm install mongodb\n15. then, import { MongoClient } from 'mongodb'; in your file\n16. call this in your code, -\u003e-\u003e-\u003e MongoClient.connect();\n16. Add your connection string into your application code:\n    mongodb+srv://shahram:\u003cpassword\u003e@cluster-sh.rgaxnx4.mongodb.net/?retryWrites=true\u0026w=majority\u0026appName=Cluster-Sh\n\n    change the user \u0026 password \u0026 appName, like this:\n    'mongodb+srv://shahram:96C5ScLzZs4ghP7Z@cluster-sh.rgaxnx4.mongodb.net/?retryWrites=true\u0026w=majority\u0026appName=Cluster-Sh'\n\n\n\n\nfile-based routing\nAPI routes\nPage pre-rendering with data fetching\n\nHosting provider: Vercel\n\n\n\n\n\n\n\n\n===========================--\u003e\n\n\n\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahramshakiba%2Fnextjs-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahramshakiba%2Fnextjs-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahramshakiba%2Fnextjs-basic/lists"}