Next.js Full Course Level1

1مُقدمة المُستوى الأول
2Project Setup

My VS-Code Settings

nodejs.org

Install next.js

Set Up Font Awesome

in jsconfig.json

 {
   "compilerOptions": {
     "checkJs": true,
     "jsx": "react-jsx",
     "baseUrl": "src",
     "resolveJsonModule": true,
     "lib": ["es6", "dom", "es2017"],
   },
   "include": [
     "src"
   ],
   "exclude": [
     "node_modules",
     "build"
   ]
 }

Download files

3Layouts & Links

Download files

4Fetching Data From API

Next.js Data Fetching

Download files

5JSON Server (Fake Database) & Loading Screen

npm i json-server

json-server --watch --port 4000 ./fakeDB/db.json
db.json Example:

 {
   "products": [
     {
       "id": "1",
       "productImg": "./images/1.png",
       "title": "Black Short",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 150
     },
     {
       "id": "2",
       "productImg": "./images/2.webp",
       "title": "Men Travel Bag",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 200
     },
     {
       "id": "3",
       "productImg": "./images/3.webp",
       "title": "Sport Backpack",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 50
     },
     {
       "id": "4",
       "productImg": "./images/4.webp",
       "title": "Casual Men's Shoes",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 300
     },
     {
       "id": "5",
       "productImg": "./images/5.webp",
       "title": "Summer Baseball Cap",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 100
     },
     {
       "id": "6",
       "productImg": "./images/6.webp",
       "title": "Apple Watch",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 14.99
     },
     {
       "id": "7",
       "productImg": "./images/7.webp",
       "title": "Trendy Sunglasses",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 100
     },
     {
       "id": "8",
       "productImg": "./images/8.png",
       "title": "Men's Tank Top",
       "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eveniet eos rem molestiae repellendus, ducimus distinctio      perspiciatis veniam, neque iure illo eligendi. Lorem ipsum dolor sit      amet, consectetur adipisicing elit Suscipit consectetur.",
       "price": 14.99
     }
   ]
 }

👉 Wait 5 seconds before executing next line:

await new Promise(resolve => setTimeout(resolve, 5000))

Download files

6Get only one product (Dynamic Routes)

Download files

7Custom 404 Page notFound()

Download files

8Dynamic metadata generateMetadata()

Dynamic metadata

Google fonts

Download files

9Using<Image>in Next.js

next.js <Image>

Download files

10Deploying a Next.js Application on Vercel

vercel.com

Files for deploy

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك