Next.js Full Course Level1

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

2Project Setup (Convert HTML to Next.js)

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 install -g 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