├── essablog ├── README.md ├── jsconfig.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── [id].js │ ├── _app.js │ ├── _document.js │ ├── aboutme.js │ ├── api │ │ └── hello.js │ ├── index.js │ ├── muhammed.js │ ├── posts │ │ ├── [postid].js │ │ └── index.js │ ├── services │ │ ├── [cars] │ │ │ └── [carid].js │ │ └── index.js │ └── users.js ├── public │ ├── favicon.ico │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg └── styles │ ├── Home.module.css │ └── globals.css ├── myapi ├── README.md ├── jsconfig.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ ├── api │ │ └── hello.js │ ├── index.js │ └── posts │ │ ├── [id].js │ │ └── index.js ├── public │ ├── favicon.ico │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg └── styles │ ├── Home.module.css │ └── globals.css ├── mycrud ├── README.md ├── components │ ├── Footer.js │ ├── Header.js │ ├── MainLayout.js │ └── PostItem.js ├── jsconfig.json ├── models │ └── Post.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── 404.js │ ├── _app.js │ ├── _document.js │ ├── api │ │ ├── hello.js │ │ └── posts │ │ │ ├── [id].js │ │ │ └── index.js │ ├── index.js │ └── posts │ │ ├── [id].js │ │ ├── addpost.js │ │ └── index.js ├── public │ ├── favicon.ico │ ├── myimage.png │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg ├── styles │ ├── Home.module.css │ └── globals.css └── utils │ ├── config.js │ └── connectDB.js ├── mylayout ├── README.md ├── components │ ├── Footer.js │ ├── Header.js │ └── mainLayout.js ├── jsconfig.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ ├── api │ │ └── hello.js │ ├── contactus.js │ ├── index.js │ └── users.js ├── public │ ├── favicon.ico │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg └── styles │ ├── Home.module.css │ ├── Index.module.css │ └── globals.css └── mymongodata ├── README.md ├── jsconfig.json ├── models └── Post.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── api │ ├── hello.js │ └── posts │ │ ├── [id].js │ │ └── index.js └── index.js ├── public ├── favicon.ico ├── next.svg ├── thirteen.svg └── vercel.svg ├── styles ├── Home.module.css └── globals.css └── utils └── dbConnect.js /essablog/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /essablog/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /essablog/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /essablog/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "essablog", 3 | "version": "0.1.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "essablog", 9 | "version": "0.1.0", 10 | "dependencies": { 11 | "next": "13.2.4", 12 | "react": "18.2.0", 13 | "react-dom": "18.2.0" 14 | } 15 | }, 16 | "node_modules/@next/env": { 17 | "version": "13.2.4", 18 | "resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz", 19 | "integrity": "sha512-+Mq3TtpkeeKFZanPturjcXt+KHfKYnLlX6jMLyCrmpq6OOs4i1GqBOAauSkii9QeKCMTYzGppar21JU57b/GEA==" 20 | }, 21 | "node_modules/@next/swc-android-arm-eabi": { 22 | "version": "13.2.4", 23 | "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz", 24 | "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==", 25 | "cpu": [ 26 | "arm" 27 | ], 28 | "optional": true, 29 | "os": [ 30 | "android" 31 | ], 32 | "engines": { 33 | "node": ">= 10" 34 | } 35 | }, 36 | "node_modules/@next/swc-android-arm64": { 37 | "version": "13.2.4", 38 | "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz", 39 | "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==", 40 | "cpu": [ 41 | "arm64" 42 | ], 43 | "optional": true, 44 | "os": [ 45 | "android" 46 | ], 47 | "engines": { 48 | "node": ">= 10" 49 | } 50 | }, 51 | "node_modules/@next/swc-darwin-arm64": { 52 | "version": "13.2.4", 53 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.4.tgz", 54 | "integrity": "sha512-S6vBl+OrInP47TM3LlYx65betocKUUlTZDDKzTiRDbsRESeyIkBtZ6Qi5uT2zQs4imqllJznVjFd1bXLx3Aa6A==", 55 | "cpu": [ 56 | "arm64" 57 | ], 58 | "optional": true, 59 | "os": [ 60 | "darwin" 61 | ], 62 | "engines": { 63 | "node": ">= 10" 64 | } 65 | }, 66 | "node_modules/@next/swc-darwin-x64": { 67 | "version": "13.2.4", 68 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.2.4.tgz", 69 | "integrity": "sha512-a6LBuoYGcFOPGd4o8TPo7wmv5FnMr+Prz+vYHopEDuhDoMSHOnC+v+Ab4D7F0NMZkvQjEJQdJS3rqgFhlZmKlw==", 70 | "cpu": [ 71 | "x64" 72 | ], 73 | "optional": true, 74 | "os": [ 75 | "darwin" 76 | ], 77 | "engines": { 78 | "node": ">= 10" 79 | } 80 | }, 81 | "node_modules/@next/swc-freebsd-x64": { 82 | "version": "13.2.4", 83 | "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz", 84 | "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==", 85 | "cpu": [ 86 | "x64" 87 | ], 88 | "optional": true, 89 | "os": [ 90 | "freebsd" 91 | ], 92 | "engines": { 93 | "node": ">= 10" 94 | } 95 | }, 96 | "node_modules/@next/swc-linux-arm-gnueabihf": { 97 | "version": "13.2.4", 98 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz", 99 | "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==", 100 | "cpu": [ 101 | "arm" 102 | ], 103 | "optional": true, 104 | "os": [ 105 | "linux" 106 | ], 107 | "engines": { 108 | "node": ">= 10" 109 | } 110 | }, 111 | "node_modules/@next/swc-linux-arm64-gnu": { 112 | "version": "13.2.4", 113 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.2.4.tgz", 114 | "integrity": "sha512-xzYZdAeq883MwXgcwc72hqo/F/dwUxCukpDOkx/j1HTq/J0wJthMGjinN9wH5bPR98Mfeh1MZJ91WWPnZOedOg==", 115 | "cpu": [ 116 | "arm64" 117 | ], 118 | "optional": true, 119 | "os": [ 120 | "linux" 121 | ], 122 | "engines": { 123 | "node": ">= 10" 124 | } 125 | }, 126 | "node_modules/@next/swc-linux-arm64-musl": { 127 | "version": "13.2.4", 128 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.2.4.tgz", 129 | "integrity": "sha512-8rXr3WfmqSiYkb71qzuDP6I6R2T2tpkmf83elDN8z783N9nvTJf2E7eLx86wu2OJCi4T05nuxCsh4IOU3LQ5xw==", 130 | "cpu": [ 131 | "arm64" 132 | ], 133 | "optional": true, 134 | "os": [ 135 | "linux" 136 | ], 137 | "engines": { 138 | "node": ">= 10" 139 | } 140 | }, 141 | "node_modules/@next/swc-linux-x64-gnu": { 142 | "version": "13.2.4", 143 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.2.4.tgz", 144 | "integrity": "sha512-Ngxh51zGSlYJ4EfpKG4LI6WfquulNdtmHg1yuOYlaAr33KyPJp4HeN/tivBnAHcZkoNy0hh/SbwDyCnz5PFJQQ==", 145 | "cpu": [ 146 | "x64" 147 | ], 148 | "optional": true, 149 | "os": [ 150 | "linux" 151 | ], 152 | "engines": { 153 | "node": ">= 10" 154 | } 155 | }, 156 | "node_modules/@next/swc-linux-x64-musl": { 157 | "version": "13.2.4", 158 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.2.4.tgz", 159 | "integrity": "sha512-gOvwIYoSxd+j14LOcvJr+ekd9fwYT1RyMAHOp7znA10+l40wkFiMONPLWiZuHxfRk+Dy7YdNdDh3ImumvL6VwA==", 160 | "cpu": [ 161 | "x64" 162 | ], 163 | "optional": true, 164 | "os": [ 165 | "linux" 166 | ], 167 | "engines": { 168 | "node": ">= 10" 169 | } 170 | }, 171 | "node_modules/@next/swc-win32-arm64-msvc": { 172 | "version": "13.2.4", 173 | "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.2.4.tgz", 174 | "integrity": "sha512-q3NJzcfClgBm4HvdcnoEncmztxrA5GXqKeiZ/hADvC56pwNALt3ngDC6t6qr1YW9V/EPDxCYeaX4zYxHciW4Dw==", 175 | "cpu": [ 176 | "arm64" 177 | ], 178 | "optional": true, 179 | "os": [ 180 | "win32" 181 | ], 182 | "engines": { 183 | "node": ">= 10" 184 | } 185 | }, 186 | "node_modules/@next/swc-win32-ia32-msvc": { 187 | "version": "13.2.4", 188 | "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.2.4.tgz", 189 | "integrity": "sha512-/eZ5ncmHUYtD2fc6EUmAIZlAJnVT2YmxDsKs1Ourx0ttTtvtma/WKlMV5NoUsyOez0f9ExLyOpeCoz5aj+MPXw==", 190 | "cpu": [ 191 | "ia32" 192 | ], 193 | "optional": true, 194 | "os": [ 195 | "win32" 196 | ], 197 | "engines": { 198 | "node": ">= 10" 199 | } 200 | }, 201 | "node_modules/@next/swc-win32-x64-msvc": { 202 | "version": "13.2.4", 203 | "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.4.tgz", 204 | "integrity": "sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==", 205 | "cpu": [ 206 | "x64" 207 | ], 208 | "optional": true, 209 | "os": [ 210 | "win32" 211 | ], 212 | "engines": { 213 | "node": ">= 10" 214 | } 215 | }, 216 | "node_modules/@swc/helpers": { 217 | "version": "0.4.14", 218 | "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", 219 | "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", 220 | "dependencies": { 221 | "tslib": "^2.4.0" 222 | } 223 | }, 224 | "node_modules/caniuse-lite": { 225 | "version": "1.0.30001468", 226 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz", 227 | "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==", 228 | "funding": [ 229 | { 230 | "type": "opencollective", 231 | "url": "https://opencollective.com/browserslist" 232 | }, 233 | { 234 | "type": "tidelift", 235 | "url": "https://tidelift.com/funding/github/npm/caniuse-lite" 236 | } 237 | ] 238 | }, 239 | "node_modules/client-only": { 240 | "version": "0.0.1", 241 | "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", 242 | "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" 243 | }, 244 | "node_modules/js-tokens": { 245 | "version": "4.0.0", 246 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 247 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 248 | }, 249 | "node_modules/loose-envify": { 250 | "version": "1.4.0", 251 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 252 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 253 | "dependencies": { 254 | "js-tokens": "^3.0.0 || ^4.0.0" 255 | }, 256 | "bin": { 257 | "loose-envify": "cli.js" 258 | } 259 | }, 260 | "node_modules/nanoid": { 261 | "version": "3.3.4", 262 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", 263 | "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", 264 | "bin": { 265 | "nanoid": "bin/nanoid.cjs" 266 | }, 267 | "engines": { 268 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 269 | } 270 | }, 271 | "node_modules/next": { 272 | "version": "13.2.4", 273 | "resolved": "https://registry.npmjs.org/next/-/next-13.2.4.tgz", 274 | "integrity": "sha512-g1I30317cThkEpvzfXujf0O4wtaQHtDCLhlivwlTJ885Ld+eOgcz7r3TGQzeU+cSRoNHtD8tsJgzxVdYojFssw==", 275 | "dependencies": { 276 | "@next/env": "13.2.4", 277 | "@swc/helpers": "0.4.14", 278 | "caniuse-lite": "^1.0.30001406", 279 | "postcss": "8.4.14", 280 | "styled-jsx": "5.1.1" 281 | }, 282 | "bin": { 283 | "next": "dist/bin/next" 284 | }, 285 | "engines": { 286 | "node": ">=14.6.0" 287 | }, 288 | "optionalDependencies": { 289 | "@next/swc-android-arm-eabi": "13.2.4", 290 | "@next/swc-android-arm64": "13.2.4", 291 | "@next/swc-darwin-arm64": "13.2.4", 292 | "@next/swc-darwin-x64": "13.2.4", 293 | "@next/swc-freebsd-x64": "13.2.4", 294 | "@next/swc-linux-arm-gnueabihf": "13.2.4", 295 | "@next/swc-linux-arm64-gnu": "13.2.4", 296 | "@next/swc-linux-arm64-musl": "13.2.4", 297 | "@next/swc-linux-x64-gnu": "13.2.4", 298 | "@next/swc-linux-x64-musl": "13.2.4", 299 | "@next/swc-win32-arm64-msvc": "13.2.4", 300 | "@next/swc-win32-ia32-msvc": "13.2.4", 301 | "@next/swc-win32-x64-msvc": "13.2.4" 302 | }, 303 | "peerDependencies": { 304 | "@opentelemetry/api": "^1.4.0", 305 | "fibers": ">= 3.1.0", 306 | "node-sass": "^6.0.0 || ^7.0.0", 307 | "react": "^18.2.0", 308 | "react-dom": "^18.2.0", 309 | "sass": "^1.3.0" 310 | }, 311 | "peerDependenciesMeta": { 312 | "@opentelemetry/api": { 313 | "optional": true 314 | }, 315 | "fibers": { 316 | "optional": true 317 | }, 318 | "node-sass": { 319 | "optional": true 320 | }, 321 | "sass": { 322 | "optional": true 323 | } 324 | } 325 | }, 326 | "node_modules/picocolors": { 327 | "version": "1.0.0", 328 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 329 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 330 | }, 331 | "node_modules/postcss": { 332 | "version": "8.4.14", 333 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", 334 | "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", 335 | "funding": [ 336 | { 337 | "type": "opencollective", 338 | "url": "https://opencollective.com/postcss/" 339 | }, 340 | { 341 | "type": "tidelift", 342 | "url": "https://tidelift.com/funding/github/npm/postcss" 343 | } 344 | ], 345 | "dependencies": { 346 | "nanoid": "^3.3.4", 347 | "picocolors": "^1.0.0", 348 | "source-map-js": "^1.0.2" 349 | }, 350 | "engines": { 351 | "node": "^10 || ^12 || >=14" 352 | } 353 | }, 354 | "node_modules/react": { 355 | "version": "18.2.0", 356 | "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", 357 | "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", 358 | "dependencies": { 359 | "loose-envify": "^1.1.0" 360 | }, 361 | "engines": { 362 | "node": ">=0.10.0" 363 | } 364 | }, 365 | "node_modules/react-dom": { 366 | "version": "18.2.0", 367 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", 368 | "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", 369 | "dependencies": { 370 | "loose-envify": "^1.1.0", 371 | "scheduler": "^0.23.0" 372 | }, 373 | "peerDependencies": { 374 | "react": "^18.2.0" 375 | } 376 | }, 377 | "node_modules/scheduler": { 378 | "version": "0.23.0", 379 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", 380 | "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", 381 | "dependencies": { 382 | "loose-envify": "^1.1.0" 383 | } 384 | }, 385 | "node_modules/source-map-js": { 386 | "version": "1.0.2", 387 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 388 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 389 | "engines": { 390 | "node": ">=0.10.0" 391 | } 392 | }, 393 | "node_modules/styled-jsx": { 394 | "version": "5.1.1", 395 | "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", 396 | "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", 397 | "dependencies": { 398 | "client-only": "0.0.1" 399 | }, 400 | "engines": { 401 | "node": ">= 12.0.0" 402 | }, 403 | "peerDependencies": { 404 | "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0" 405 | }, 406 | "peerDependenciesMeta": { 407 | "@babel/core": { 408 | "optional": true 409 | }, 410 | "babel-plugin-macros": { 411 | "optional": true 412 | } 413 | } 414 | }, 415 | "node_modules/tslib": { 416 | "version": "2.5.0", 417 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", 418 | "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" 419 | } 420 | } 421 | } 422 | -------------------------------------------------------------------------------- /essablog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "essablog", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "13.2.4", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /essablog/pages/[id].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | 3 | 4 | export default function myID() { 5 | 6 | const router = useRouter() 7 | 8 | return( 9 | <> 10 |

ID page {router.query.id}

11 | 12 | ) 13 | 14 | } -------------------------------------------------------------------------------- /essablog/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | 3 | export default function App({ Component, pageProps }) { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /essablog/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /essablog/pages/aboutme.js: -------------------------------------------------------------------------------- 1 | export default function aboutMe() { 2 | 3 | return( 4 | <> 5 |

About me page

6 | 7 | ) 8 | 9 | } -------------------------------------------------------------------------------- /essablog/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /essablog/pages/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import { useRouter } from 'next/router' 3 | 4 | export default function Home() { 5 | 6 | const router = useRouter() 7 | const studentname = 'muhammedhameed' 8 | const studentNo = '234234234' 9 | 10 | return ( 11 | <> 12 |

Hello Muhammed Essa

13 | 14 | 15 | muhammed

16 | about me

17 | Users

18 | 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /essablog/pages/muhammed.js: -------------------------------------------------------------------------------- 1 | export default function Hameed() { 2 | return ( 3 | <> 4 |

Muhammed Page

5 | 6 | ) 7 | } -------------------------------------------------------------------------------- /essablog/pages/posts/[postid].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | 3 | export default function postID() { 4 | const router = useRouter() 5 | return( 6 | <> 7 |

Post number : {router.query.postid}

8 | 9 | ) 10 | 11 | } -------------------------------------------------------------------------------- /essablog/pages/posts/index.js: -------------------------------------------------------------------------------- 1 | export default function index() { 2 | 3 | return( 4 | <> 5 |

Posts page

6 | 7 | ) 8 | 9 | } -------------------------------------------------------------------------------- /essablog/pages/services/[cars]/[carid].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | 3 | export default function carid() { 4 | const router = useRouter() 5 | return( 6 | <> 7 |

Car type : {router.query.cars}

8 |

car number : {router.query.carid}

9 | 10 | 11 | 12 | 13 | ) 14 | 15 | } -------------------------------------------------------------------------------- /essablog/pages/services/index.js: -------------------------------------------------------------------------------- 1 | export default function index() { 2 | 3 | return( 4 | <> 5 |

Services page

6 | 7 | ) 8 | 9 | } -------------------------------------------------------------------------------- /essablog/pages/users.js: -------------------------------------------------------------------------------- 1 | export default function users() { 2 | 3 | return( 4 | <> 5 |

Users page

6 | 7 | ) 8 | 9 | } -------------------------------------------------------------------------------- /essablog/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhammedessa/next-js-tutorial/5513d2176b1f0741c3acd7fc655fd75f366e1b89/essablog/public/favicon.ico -------------------------------------------------------------------------------- /essablog/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /essablog/public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /essablog/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /essablog/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 6rem; 7 | min-height: 100vh; 8 | } 9 | 10 | .description { 11 | display: inherit; 12 | justify-content: inherit; 13 | align-items: inherit; 14 | font-size: 0.85rem; 15 | max-width: var(--max-width); 16 | width: 100%; 17 | z-index: 2; 18 | font-family: var(--font-mono); 19 | } 20 | 21 | .description a { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | gap: 0.5rem; 26 | } 27 | 28 | .description p { 29 | position: relative; 30 | margin: 0; 31 | padding: 1rem; 32 | background-color: rgba(var(--callout-rgb), 0.5); 33 | border: 1px solid rgba(var(--callout-border-rgb), 0.3); 34 | border-radius: var(--border-radius); 35 | } 36 | 37 | .code { 38 | font-weight: 700; 39 | font-family: var(--font-mono); 40 | } 41 | 42 | .grid { 43 | display: grid; 44 | grid-template-columns: repeat(4, minmax(25%, auto)); 45 | width: var(--max-width); 46 | max-width: 100%; 47 | } 48 | 49 | .card { 50 | padding: 1rem 1.2rem; 51 | border-radius: var(--border-radius); 52 | background: rgba(var(--card-rgb), 0); 53 | border: 1px solid rgba(var(--card-border-rgb), 0); 54 | transition: background 200ms, border 200ms; 55 | } 56 | 57 | .card span { 58 | display: inline-block; 59 | transition: transform 200ms; 60 | } 61 | 62 | .card h2 { 63 | font-weight: 600; 64 | margin-bottom: 0.7rem; 65 | } 66 | 67 | .card p { 68 | margin: 0; 69 | opacity: 0.6; 70 | font-size: 0.9rem; 71 | line-height: 1.5; 72 | max-width: 30ch; 73 | } 74 | 75 | .center { 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | position: relative; 80 | padding: 4rem 0; 81 | } 82 | 83 | .center::before { 84 | background: var(--secondary-glow); 85 | border-radius: 50%; 86 | width: 480px; 87 | height: 360px; 88 | margin-left: -400px; 89 | } 90 | 91 | .center::after { 92 | background: var(--primary-glow); 93 | width: 240px; 94 | height: 180px; 95 | z-index: -1; 96 | } 97 | 98 | .center::before, 99 | .center::after { 100 | content: ''; 101 | left: 50%; 102 | position: absolute; 103 | filter: blur(45px); 104 | transform: translateZ(0); 105 | } 106 | 107 | .logo, 108 | .thirteen { 109 | position: relative; 110 | } 111 | 112 | .thirteen { 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | width: 75px; 117 | height: 75px; 118 | padding: 25px 10px; 119 | margin-left: 16px; 120 | transform: translateZ(0); 121 | border-radius: var(--border-radius); 122 | overflow: hidden; 123 | box-shadow: 0px 2px 8px -1px #0000001a; 124 | } 125 | 126 | .thirteen::before, 127 | .thirteen::after { 128 | content: ''; 129 | position: absolute; 130 | z-index: -1; 131 | } 132 | 133 | /* Conic Gradient Animation */ 134 | .thirteen::before { 135 | animation: 6s rotate linear infinite; 136 | width: 200%; 137 | height: 200%; 138 | background: var(--tile-border); 139 | } 140 | 141 | /* Inner Square */ 142 | .thirteen::after { 143 | inset: 0; 144 | padding: 1px; 145 | border-radius: var(--border-radius); 146 | background: linear-gradient( 147 | to bottom right, 148 | rgba(var(--tile-start-rgb), 1), 149 | rgba(var(--tile-end-rgb), 1) 150 | ); 151 | background-clip: content-box; 152 | } 153 | 154 | /* Enable hover only on non-touch devices */ 155 | @media (hover: hover) and (pointer: fine) { 156 | .card:hover { 157 | background: rgba(var(--card-rgb), 0.1); 158 | border: 1px solid rgba(var(--card-border-rgb), 0.15); 159 | } 160 | 161 | .card:hover span { 162 | transform: translateX(4px); 163 | } 164 | } 165 | 166 | @media (prefers-reduced-motion) { 167 | .thirteen::before { 168 | animation: none; 169 | } 170 | 171 | .card:hover span { 172 | transform: none; 173 | } 174 | } 175 | 176 | /* Mobile */ 177 | @media (max-width: 700px) { 178 | .content { 179 | padding: 4rem; 180 | } 181 | 182 | .grid { 183 | grid-template-columns: 1fr; 184 | margin-bottom: 120px; 185 | max-width: 320px; 186 | text-align: center; 187 | } 188 | 189 | .card { 190 | padding: 1rem 2.5rem; 191 | } 192 | 193 | .card h2 { 194 | margin-bottom: 0.5rem; 195 | } 196 | 197 | .center { 198 | padding: 8rem 0 6rem; 199 | } 200 | 201 | .center::before { 202 | transform: none; 203 | height: 300px; 204 | } 205 | 206 | .description { 207 | font-size: 0.8rem; 208 | } 209 | 210 | .description a { 211 | padding: 1rem; 212 | } 213 | 214 | .description p, 215 | .description div { 216 | display: flex; 217 | justify-content: center; 218 | position: fixed; 219 | width: 100%; 220 | } 221 | 222 | .description p { 223 | align-items: center; 224 | inset: 0 0 auto; 225 | padding: 2rem 1rem 1.4rem; 226 | border-radius: 0; 227 | border: none; 228 | border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); 229 | background: linear-gradient( 230 | to bottom, 231 | rgba(var(--background-start-rgb), 1), 232 | rgba(var(--callout-rgb), 0.5) 233 | ); 234 | background-clip: padding-box; 235 | backdrop-filter: blur(24px); 236 | } 237 | 238 | .description div { 239 | align-items: flex-end; 240 | pointer-events: none; 241 | inset: auto 0 0; 242 | padding: 2rem; 243 | height: 200px; 244 | background: linear-gradient( 245 | to bottom, 246 | transparent 0%, 247 | rgb(var(--background-end-rgb)) 40% 248 | ); 249 | z-index: 1; 250 | } 251 | } 252 | 253 | /* Tablet and Smaller Desktop */ 254 | @media (min-width: 701px) and (max-width: 1120px) { 255 | .grid { 256 | grid-template-columns: repeat(2, 50%); 257 | } 258 | } 259 | 260 | @media (prefers-color-scheme: dark) { 261 | .vercelLogo { 262 | filter: invert(1); 263 | } 264 | 265 | .logo, 266 | .thirteen img { 267 | filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); 268 | } 269 | } 270 | 271 | @keyframes rotate { 272 | from { 273 | transform: rotate(360deg); 274 | } 275 | to { 276 | transform: rotate(0deg); 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /essablog/styles/globals.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhammedessa/next-js-tutorial/5513d2176b1f0741c3acd7fc655fd75f366e1b89/essablog/styles/globals.css -------------------------------------------------------------------------------- /myapi/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /myapi/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /myapi/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /myapi/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapi", 3 | "version": "0.1.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "myapi", 9 | "version": "0.1.0", 10 | "dependencies": { 11 | "axios": "^1.3.4", 12 | "next": "13.2.4", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0" 15 | } 16 | }, 17 | "node_modules/@next/env": { 18 | "version": "13.2.4", 19 | "resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz", 20 | "integrity": "sha512-+Mq3TtpkeeKFZanPturjcXt+KHfKYnLlX6jMLyCrmpq6OOs4i1GqBOAauSkii9QeKCMTYzGppar21JU57b/GEA==" 21 | }, 22 | "node_modules/@next/swc-android-arm-eabi": { 23 | "version": "13.2.4", 24 | "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz", 25 | "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==", 26 | "cpu": [ 27 | "arm" 28 | ], 29 | "optional": true, 30 | "os": [ 31 | "android" 32 | ], 33 | "engines": { 34 | "node": ">= 10" 35 | } 36 | }, 37 | "node_modules/@next/swc-android-arm64": { 38 | "version": "13.2.4", 39 | "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz", 40 | "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==", 41 | "cpu": [ 42 | "arm64" 43 | ], 44 | "optional": true, 45 | "os": [ 46 | "android" 47 | ], 48 | "engines": { 49 | "node": ">= 10" 50 | } 51 | }, 52 | "node_modules/@next/swc-darwin-arm64": { 53 | "version": "13.2.4", 54 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.2.4.tgz", 55 | "integrity": "sha512-S6vBl+OrInP47TM3LlYx65betocKUUlTZDDKzTiRDbsRESeyIkBtZ6Qi5uT2zQs4imqllJznVjFd1bXLx3Aa6A==", 56 | "cpu": [ 57 | "arm64" 58 | ], 59 | "optional": true, 60 | "os": [ 61 | "darwin" 62 | ], 63 | "engines": { 64 | "node": ">= 10" 65 | } 66 | }, 67 | "node_modules/@next/swc-darwin-x64": { 68 | "version": "13.2.4", 69 | "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.2.4.tgz", 70 | "integrity": "sha512-a6LBuoYGcFOPGd4o8TPo7wmv5FnMr+Prz+vYHopEDuhDoMSHOnC+v+Ab4D7F0NMZkvQjEJQdJS3rqgFhlZmKlw==", 71 | "cpu": [ 72 | "x64" 73 | ], 74 | "optional": true, 75 | "os": [ 76 | "darwin" 77 | ], 78 | "engines": { 79 | "node": ">= 10" 80 | } 81 | }, 82 | "node_modules/@next/swc-freebsd-x64": { 83 | "version": "13.2.4", 84 | "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz", 85 | "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==", 86 | "cpu": [ 87 | "x64" 88 | ], 89 | "optional": true, 90 | "os": [ 91 | "freebsd" 92 | ], 93 | "engines": { 94 | "node": ">= 10" 95 | } 96 | }, 97 | "node_modules/@next/swc-linux-arm-gnueabihf": { 98 | "version": "13.2.4", 99 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz", 100 | "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==", 101 | "cpu": [ 102 | "arm" 103 | ], 104 | "optional": true, 105 | "os": [ 106 | "linux" 107 | ], 108 | "engines": { 109 | "node": ">= 10" 110 | } 111 | }, 112 | "node_modules/@next/swc-linux-arm64-gnu": { 113 | "version": "13.2.4", 114 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.2.4.tgz", 115 | "integrity": "sha512-xzYZdAeq883MwXgcwc72hqo/F/dwUxCukpDOkx/j1HTq/J0wJthMGjinN9wH5bPR98Mfeh1MZJ91WWPnZOedOg==", 116 | "cpu": [ 117 | "arm64" 118 | ], 119 | "optional": true, 120 | "os": [ 121 | "linux" 122 | ], 123 | "engines": { 124 | "node": ">= 10" 125 | } 126 | }, 127 | "node_modules/@next/swc-linux-arm64-musl": { 128 | "version": "13.2.4", 129 | "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.2.4.tgz", 130 | "integrity": "sha512-8rXr3WfmqSiYkb71qzuDP6I6R2T2tpkmf83elDN8z783N9nvTJf2E7eLx86wu2OJCi4T05nuxCsh4IOU3LQ5xw==", 131 | "cpu": [ 132 | "arm64" 133 | ], 134 | "optional": true, 135 | "os": [ 136 | "linux" 137 | ], 138 | "engines": { 139 | "node": ">= 10" 140 | } 141 | }, 142 | "node_modules/@next/swc-linux-x64-gnu": { 143 | "version": "13.2.4", 144 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.2.4.tgz", 145 | "integrity": "sha512-Ngxh51zGSlYJ4EfpKG4LI6WfquulNdtmHg1yuOYlaAr33KyPJp4HeN/tivBnAHcZkoNy0hh/SbwDyCnz5PFJQQ==", 146 | "cpu": [ 147 | "x64" 148 | ], 149 | "optional": true, 150 | "os": [ 151 | "linux" 152 | ], 153 | "engines": { 154 | "node": ">= 10" 155 | } 156 | }, 157 | "node_modules/@next/swc-linux-x64-musl": { 158 | "version": "13.2.4", 159 | "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.2.4.tgz", 160 | "integrity": "sha512-gOvwIYoSxd+j14LOcvJr+ekd9fwYT1RyMAHOp7znA10+l40wkFiMONPLWiZuHxfRk+Dy7YdNdDh3ImumvL6VwA==", 161 | "cpu": [ 162 | "x64" 163 | ], 164 | "optional": true, 165 | "os": [ 166 | "linux" 167 | ], 168 | "engines": { 169 | "node": ">= 10" 170 | } 171 | }, 172 | "node_modules/@next/swc-win32-arm64-msvc": { 173 | "version": "13.2.4", 174 | "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.2.4.tgz", 175 | "integrity": "sha512-q3NJzcfClgBm4HvdcnoEncmztxrA5GXqKeiZ/hADvC56pwNALt3ngDC6t6qr1YW9V/EPDxCYeaX4zYxHciW4Dw==", 176 | "cpu": [ 177 | "arm64" 178 | ], 179 | "optional": true, 180 | "os": [ 181 | "win32" 182 | ], 183 | "engines": { 184 | "node": ">= 10" 185 | } 186 | }, 187 | "node_modules/@next/swc-win32-ia32-msvc": { 188 | "version": "13.2.4", 189 | "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.2.4.tgz", 190 | "integrity": "sha512-/eZ5ncmHUYtD2fc6EUmAIZlAJnVT2YmxDsKs1Ourx0ttTtvtma/WKlMV5NoUsyOez0f9ExLyOpeCoz5aj+MPXw==", 191 | "cpu": [ 192 | "ia32" 193 | ], 194 | "optional": true, 195 | "os": [ 196 | "win32" 197 | ], 198 | "engines": { 199 | "node": ">= 10" 200 | } 201 | }, 202 | "node_modules/@next/swc-win32-x64-msvc": { 203 | "version": "13.2.4", 204 | "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.4.tgz", 205 | "integrity": "sha512-0MffFmyv7tBLlji01qc0IaPP/LVExzvj7/R5x1Jph1bTAIj4Vu81yFQWHHQAP6r4ff9Ukj1mBK6MDNVXm7Tcvw==", 206 | "cpu": [ 207 | "x64" 208 | ], 209 | "optional": true, 210 | "os": [ 211 | "win32" 212 | ], 213 | "engines": { 214 | "node": ">= 10" 215 | } 216 | }, 217 | "node_modules/@swc/helpers": { 218 | "version": "0.4.14", 219 | "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", 220 | "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", 221 | "dependencies": { 222 | "tslib": "^2.4.0" 223 | } 224 | }, 225 | "node_modules/asynckit": { 226 | "version": "0.4.0", 227 | "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", 228 | "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" 229 | }, 230 | "node_modules/axios": { 231 | "version": "1.3.4", 232 | "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", 233 | "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", 234 | "dependencies": { 235 | "follow-redirects": "^1.15.0", 236 | "form-data": "^4.0.0", 237 | "proxy-from-env": "^1.1.0" 238 | } 239 | }, 240 | "node_modules/caniuse-lite": { 241 | "version": "1.0.30001468", 242 | "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz", 243 | "integrity": "sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==", 244 | "funding": [ 245 | { 246 | "type": "opencollective", 247 | "url": "https://opencollective.com/browserslist" 248 | }, 249 | { 250 | "type": "tidelift", 251 | "url": "https://tidelift.com/funding/github/npm/caniuse-lite" 252 | } 253 | ] 254 | }, 255 | "node_modules/client-only": { 256 | "version": "0.0.1", 257 | "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", 258 | "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" 259 | }, 260 | "node_modules/combined-stream": { 261 | "version": "1.0.8", 262 | "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", 263 | "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", 264 | "dependencies": { 265 | "delayed-stream": "~1.0.0" 266 | }, 267 | "engines": { 268 | "node": ">= 0.8" 269 | } 270 | }, 271 | "node_modules/delayed-stream": { 272 | "version": "1.0.0", 273 | "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", 274 | "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", 275 | "engines": { 276 | "node": ">=0.4.0" 277 | } 278 | }, 279 | "node_modules/follow-redirects": { 280 | "version": "1.15.2", 281 | "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", 282 | "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", 283 | "funding": [ 284 | { 285 | "type": "individual", 286 | "url": "https://github.com/sponsors/RubenVerborgh" 287 | } 288 | ], 289 | "engines": { 290 | "node": ">=4.0" 291 | }, 292 | "peerDependenciesMeta": { 293 | "debug": { 294 | "optional": true 295 | } 296 | } 297 | }, 298 | "node_modules/form-data": { 299 | "version": "4.0.0", 300 | "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", 301 | "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", 302 | "dependencies": { 303 | "asynckit": "^0.4.0", 304 | "combined-stream": "^1.0.8", 305 | "mime-types": "^2.1.12" 306 | }, 307 | "engines": { 308 | "node": ">= 6" 309 | } 310 | }, 311 | "node_modules/js-tokens": { 312 | "version": "4.0.0", 313 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 314 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 315 | }, 316 | "node_modules/loose-envify": { 317 | "version": "1.4.0", 318 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 319 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 320 | "dependencies": { 321 | "js-tokens": "^3.0.0 || ^4.0.0" 322 | }, 323 | "bin": { 324 | "loose-envify": "cli.js" 325 | } 326 | }, 327 | "node_modules/mime-db": { 328 | "version": "1.52.0", 329 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", 330 | "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", 331 | "engines": { 332 | "node": ">= 0.6" 333 | } 334 | }, 335 | "node_modules/mime-types": { 336 | "version": "2.1.35", 337 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", 338 | "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", 339 | "dependencies": { 340 | "mime-db": "1.52.0" 341 | }, 342 | "engines": { 343 | "node": ">= 0.6" 344 | } 345 | }, 346 | "node_modules/nanoid": { 347 | "version": "3.3.4", 348 | "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", 349 | "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", 350 | "bin": { 351 | "nanoid": "bin/nanoid.cjs" 352 | }, 353 | "engines": { 354 | "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" 355 | } 356 | }, 357 | "node_modules/next": { 358 | "version": "13.2.4", 359 | "resolved": "https://registry.npmjs.org/next/-/next-13.2.4.tgz", 360 | "integrity": "sha512-g1I30317cThkEpvzfXujf0O4wtaQHtDCLhlivwlTJ885Ld+eOgcz7r3TGQzeU+cSRoNHtD8tsJgzxVdYojFssw==", 361 | "dependencies": { 362 | "@next/env": "13.2.4", 363 | "@swc/helpers": "0.4.14", 364 | "caniuse-lite": "^1.0.30001406", 365 | "postcss": "8.4.14", 366 | "styled-jsx": "5.1.1" 367 | }, 368 | "bin": { 369 | "next": "dist/bin/next" 370 | }, 371 | "engines": { 372 | "node": ">=14.6.0" 373 | }, 374 | "optionalDependencies": { 375 | "@next/swc-android-arm-eabi": "13.2.4", 376 | "@next/swc-android-arm64": "13.2.4", 377 | "@next/swc-darwin-arm64": "13.2.4", 378 | "@next/swc-darwin-x64": "13.2.4", 379 | "@next/swc-freebsd-x64": "13.2.4", 380 | "@next/swc-linux-arm-gnueabihf": "13.2.4", 381 | "@next/swc-linux-arm64-gnu": "13.2.4", 382 | "@next/swc-linux-arm64-musl": "13.2.4", 383 | "@next/swc-linux-x64-gnu": "13.2.4", 384 | "@next/swc-linux-x64-musl": "13.2.4", 385 | "@next/swc-win32-arm64-msvc": "13.2.4", 386 | "@next/swc-win32-ia32-msvc": "13.2.4", 387 | "@next/swc-win32-x64-msvc": "13.2.4" 388 | }, 389 | "peerDependencies": { 390 | "@opentelemetry/api": "^1.4.0", 391 | "fibers": ">= 3.1.0", 392 | "node-sass": "^6.0.0 || ^7.0.0", 393 | "react": "^18.2.0", 394 | "react-dom": "^18.2.0", 395 | "sass": "^1.3.0" 396 | }, 397 | "peerDependenciesMeta": { 398 | "@opentelemetry/api": { 399 | "optional": true 400 | }, 401 | "fibers": { 402 | "optional": true 403 | }, 404 | "node-sass": { 405 | "optional": true 406 | }, 407 | "sass": { 408 | "optional": true 409 | } 410 | } 411 | }, 412 | "node_modules/picocolors": { 413 | "version": "1.0.0", 414 | "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", 415 | "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 416 | }, 417 | "node_modules/postcss": { 418 | "version": "8.4.14", 419 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz", 420 | "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==", 421 | "funding": [ 422 | { 423 | "type": "opencollective", 424 | "url": "https://opencollective.com/postcss/" 425 | }, 426 | { 427 | "type": "tidelift", 428 | "url": "https://tidelift.com/funding/github/npm/postcss" 429 | } 430 | ], 431 | "dependencies": { 432 | "nanoid": "^3.3.4", 433 | "picocolors": "^1.0.0", 434 | "source-map-js": "^1.0.2" 435 | }, 436 | "engines": { 437 | "node": "^10 || ^12 || >=14" 438 | } 439 | }, 440 | "node_modules/proxy-from-env": { 441 | "version": "1.1.0", 442 | "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", 443 | "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" 444 | }, 445 | "node_modules/react": { 446 | "version": "18.2.0", 447 | "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", 448 | "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", 449 | "dependencies": { 450 | "loose-envify": "^1.1.0" 451 | }, 452 | "engines": { 453 | "node": ">=0.10.0" 454 | } 455 | }, 456 | "node_modules/react-dom": { 457 | "version": "18.2.0", 458 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", 459 | "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", 460 | "dependencies": { 461 | "loose-envify": "^1.1.0", 462 | "scheduler": "^0.23.0" 463 | }, 464 | "peerDependencies": { 465 | "react": "^18.2.0" 466 | } 467 | }, 468 | "node_modules/scheduler": { 469 | "version": "0.23.0", 470 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", 471 | "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", 472 | "dependencies": { 473 | "loose-envify": "^1.1.0" 474 | } 475 | }, 476 | "node_modules/source-map-js": { 477 | "version": "1.0.2", 478 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 479 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 480 | "engines": { 481 | "node": ">=0.10.0" 482 | } 483 | }, 484 | "node_modules/styled-jsx": { 485 | "version": "5.1.1", 486 | "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", 487 | "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", 488 | "dependencies": { 489 | "client-only": "0.0.1" 490 | }, 491 | "engines": { 492 | "node": ">= 12.0.0" 493 | }, 494 | "peerDependencies": { 495 | "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0" 496 | }, 497 | "peerDependenciesMeta": { 498 | "@babel/core": { 499 | "optional": true 500 | }, 501 | "babel-plugin-macros": { 502 | "optional": true 503 | } 504 | } 505 | }, 506 | "node_modules/tslib": { 507 | "version": "2.5.0", 508 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", 509 | "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" 510 | } 511 | } 512 | } 513 | -------------------------------------------------------------------------------- /myapi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapi", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "axios": "^1.3.4", 13 | "next": "13.2.4", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /myapi/pages/_app.js: -------------------------------------------------------------------------------- 1 | //import '@/styles/globals.css' 2 | 3 | export default function App({ Component, pageProps }) { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /myapi/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /myapi/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /myapi/pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Image from 'next/image' 3 | import { Inter } from 'next/font/google' 4 | import styles from '@/styles/Home.module.css' 5 | 6 | const inter = Inter({ subsets: ['latin'] }) 7 | 8 | export default function Home() { 9 | return ( 10 | <> 11 |

Index

12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /myapi/pages/posts/[id].js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export default function Posts({post}) { 4 | return ( 5 | <> 6 |

Posts page

7 |
8 |

userId : {post.userId}

9 |

id: {post.id}

10 |

title : {post.title}

11 |

body: {post.body}

12 |
13 | 14 | ) 15 | } 16 | 17 | 18 | export async function getServerSideProps(context) { 19 | 20 | try { 21 | const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${context.query.id}`) 22 | console.log(response.data) 23 | 24 | return { 25 | props: {post:response.data}, // will be passed to the page component as props 26 | } 27 | 28 | } catch (error) { 29 | console.log(error) 30 | } 31 | 32 | 33 | } 34 | 35 | 36 | -------------------------------------------------------------------------------- /myapi/pages/posts/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export default function Posts({posts}) { 4 | return ( 5 | <> 6 |

Posts page

7 |
8 | {posts.map( 9 | (post)=>{ 10 | return

{post.title}

11 | } 12 | )} 13 |
14 | 15 | ) 16 | } 17 | 18 | 19 | export async function getStaticProps() { 20 | 21 | try { 22 | const response = await axios.get('https://jsonplaceholder.typicode.com/posts') 23 | console.log(response.data) 24 | 25 | return { 26 | props: {posts:response.data}, // will be passed to the page component as props 27 | } 28 | 29 | } catch (error) { 30 | console.log(error) 31 | } 32 | 33 | 34 | } 35 | 36 | 37 | -------------------------------------------------------------------------------- /myapi/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhammedessa/next-js-tutorial/5513d2176b1f0741c3acd7fc655fd75f366e1b89/myapi/public/favicon.ico -------------------------------------------------------------------------------- /myapi/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /myapi/public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /myapi/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /myapi/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: space-between; 5 | align-items: center; 6 | padding: 6rem; 7 | min-height: 100vh; 8 | } 9 | 10 | .description { 11 | display: inherit; 12 | justify-content: inherit; 13 | align-items: inherit; 14 | font-size: 0.85rem; 15 | max-width: var(--max-width); 16 | width: 100%; 17 | z-index: 2; 18 | font-family: var(--font-mono); 19 | } 20 | 21 | .description a { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | gap: 0.5rem; 26 | } 27 | 28 | .description p { 29 | position: relative; 30 | margin: 0; 31 | padding: 1rem; 32 | background-color: rgba(var(--callout-rgb), 0.5); 33 | border: 1px solid rgba(var(--callout-border-rgb), 0.3); 34 | border-radius: var(--border-radius); 35 | } 36 | 37 | .code { 38 | font-weight: 700; 39 | font-family: var(--font-mono); 40 | } 41 | 42 | .grid { 43 | display: grid; 44 | grid-template-columns: repeat(4, minmax(25%, auto)); 45 | width: var(--max-width); 46 | max-width: 100%; 47 | } 48 | 49 | .card { 50 | padding: 1rem 1.2rem; 51 | border-radius: var(--border-radius); 52 | background: rgba(var(--card-rgb), 0); 53 | border: 1px solid rgba(var(--card-border-rgb), 0); 54 | transition: background 200ms, border 200ms; 55 | } 56 | 57 | .card span { 58 | display: inline-block; 59 | transition: transform 200ms; 60 | } 61 | 62 | .card h2 { 63 | font-weight: 600; 64 | margin-bottom: 0.7rem; 65 | } 66 | 67 | .card p { 68 | margin: 0; 69 | opacity: 0.6; 70 | font-size: 0.9rem; 71 | line-height: 1.5; 72 | max-width: 30ch; 73 | } 74 | 75 | .center { 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | position: relative; 80 | padding: 4rem 0; 81 | } 82 | 83 | .center::before { 84 | background: var(--secondary-glow); 85 | border-radius: 50%; 86 | width: 480px; 87 | height: 360px; 88 | margin-left: -400px; 89 | } 90 | 91 | .center::after { 92 | background: var(--primary-glow); 93 | width: 240px; 94 | height: 180px; 95 | z-index: -1; 96 | } 97 | 98 | .center::before, 99 | .center::after { 100 | content: ''; 101 | left: 50%; 102 | position: absolute; 103 | filter: blur(45px); 104 | transform: translateZ(0); 105 | } 106 | 107 | .logo, 108 | .thirteen { 109 | position: relative; 110 | } 111 | 112 | .thirteen { 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | width: 75px; 117 | height: 75px; 118 | padding: 25px 10px; 119 | margin-left: 16px; 120 | transform: translateZ(0); 121 | border-radius: var(--border-radius); 122 | overflow: hidden; 123 | box-shadow: 0px 2px 8px -1px #0000001a; 124 | } 125 | 126 | .thirteen::before, 127 | .thirteen::after { 128 | content: ''; 129 | position: absolute; 130 | z-index: -1; 131 | } 132 | 133 | /* Conic Gradient Animation */ 134 | .thirteen::before { 135 | animation: 6s rotate linear infinite; 136 | width: 200%; 137 | height: 200%; 138 | background: var(--tile-border); 139 | } 140 | 141 | /* Inner Square */ 142 | .thirteen::after { 143 | inset: 0; 144 | padding: 1px; 145 | border-radius: var(--border-radius); 146 | background: linear-gradient( 147 | to bottom right, 148 | rgba(var(--tile-start-rgb), 1), 149 | rgba(var(--tile-end-rgb), 1) 150 | ); 151 | background-clip: content-box; 152 | } 153 | 154 | /* Enable hover only on non-touch devices */ 155 | @media (hover: hover) and (pointer: fine) { 156 | .card:hover { 157 | background: rgba(var(--card-rgb), 0.1); 158 | border: 1px solid rgba(var(--card-border-rgb), 0.15); 159 | } 160 | 161 | .card:hover span { 162 | transform: translateX(4px); 163 | } 164 | } 165 | 166 | @media (prefers-reduced-motion) { 167 | .thirteen::before { 168 | animation: none; 169 | } 170 | 171 | .card:hover span { 172 | transform: none; 173 | } 174 | } 175 | 176 | /* Mobile */ 177 | @media (max-width: 700px) { 178 | .content { 179 | padding: 4rem; 180 | } 181 | 182 | .grid { 183 | grid-template-columns: 1fr; 184 | margin-bottom: 120px; 185 | max-width: 320px; 186 | text-align: center; 187 | } 188 | 189 | .card { 190 | padding: 1rem 2.5rem; 191 | } 192 | 193 | .card h2 { 194 | margin-bottom: 0.5rem; 195 | } 196 | 197 | .center { 198 | padding: 8rem 0 6rem; 199 | } 200 | 201 | .center::before { 202 | transform: none; 203 | height: 300px; 204 | } 205 | 206 | .description { 207 | font-size: 0.8rem; 208 | } 209 | 210 | .description a { 211 | padding: 1rem; 212 | } 213 | 214 | .description p, 215 | .description div { 216 | display: flex; 217 | justify-content: center; 218 | position: fixed; 219 | width: 100%; 220 | } 221 | 222 | .description p { 223 | align-items: center; 224 | inset: 0 0 auto; 225 | padding: 2rem 1rem 1.4rem; 226 | border-radius: 0; 227 | border: none; 228 | border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); 229 | background: linear-gradient( 230 | to bottom, 231 | rgba(var(--background-start-rgb), 1), 232 | rgba(var(--callout-rgb), 0.5) 233 | ); 234 | background-clip: padding-box; 235 | backdrop-filter: blur(24px); 236 | } 237 | 238 | .description div { 239 | align-items: flex-end; 240 | pointer-events: none; 241 | inset: auto 0 0; 242 | padding: 2rem; 243 | height: 200px; 244 | background: linear-gradient( 245 | to bottom, 246 | transparent 0%, 247 | rgb(var(--background-end-rgb)) 40% 248 | ); 249 | z-index: 1; 250 | } 251 | } 252 | 253 | /* Tablet and Smaller Desktop */ 254 | @media (min-width: 701px) and (max-width: 1120px) { 255 | .grid { 256 | grid-template-columns: repeat(2, 50%); 257 | } 258 | } 259 | 260 | @media (prefers-color-scheme: dark) { 261 | .vercelLogo { 262 | filter: invert(1); 263 | } 264 | 265 | .logo, 266 | .thirteen img { 267 | filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); 268 | } 269 | } 270 | 271 | @keyframes rotate { 272 | from { 273 | transform: rotate(360deg); 274 | } 275 | to { 276 | transform: rotate(0deg); 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /myapi/styles/globals.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --max-width: 1100px; 3 | --border-radius: 12px; 4 | --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 5 | 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 6 | 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; 7 | 8 | --foreground-rgb: 0, 0, 0; 9 | --background-start-rgb: 214, 219, 220; 10 | --background-end-rgb: 255, 255, 255; 11 | 12 | --primary-glow: conic-gradient( 13 | from 180deg at 50% 50%, 14 | #16abff33 0deg, 15 | #0885ff33 55deg, 16 | #54d6ff33 120deg, 17 | #0071ff33 160deg, 18 | transparent 360deg 19 | ); 20 | --secondary-glow: radial-gradient( 21 | rgba(255, 255, 255, 1), 22 | rgba(255, 255, 255, 0) 23 | ); 24 | 25 | --tile-start-rgb: 239, 245, 249; 26 | --tile-end-rgb: 228, 232, 233; 27 | --tile-border: conic-gradient( 28 | #00000080, 29 | #00000040, 30 | #00000030, 31 | #00000020, 32 | #00000010, 33 | #00000010, 34 | #00000080 35 | ); 36 | 37 | --callout-rgb: 238, 240, 241; 38 | --callout-border-rgb: 172, 175, 176; 39 | --card-rgb: 180, 185, 188; 40 | --card-border-rgb: 131, 134, 135; 41 | } 42 | 43 | @media (prefers-color-scheme: dark) { 44 | :root { 45 | --foreground-rgb: 255, 255, 255; 46 | --background-start-rgb: 0, 0, 0; 47 | --background-end-rgb: 0, 0, 0; 48 | 49 | --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); 50 | --secondary-glow: linear-gradient( 51 | to bottom right, 52 | rgba(1, 65, 255, 0), 53 | rgba(1, 65, 255, 0), 54 | rgba(1, 65, 255, 0.3) 55 | ); 56 | 57 | --tile-start-rgb: 2, 13, 46; 58 | --tile-end-rgb: 2, 5, 19; 59 | --tile-border: conic-gradient( 60 | #ffffff80, 61 | #ffffff40, 62 | #ffffff30, 63 | #ffffff20, 64 | #ffffff10, 65 | #ffffff10, 66 | #ffffff80 67 | ); 68 | 69 | --callout-rgb: 20, 20, 20; 70 | --callout-border-rgb: 108, 108, 108; 71 | --card-rgb: 100, 100, 100; 72 | --card-border-rgb: 200, 200, 200; 73 | } 74 | } 75 | 76 | * { 77 | box-sizing: border-box; 78 | padding: 0; 79 | margin: 0; 80 | } 81 | 82 | html, 83 | body { 84 | max-width: 100vw; 85 | overflow-x: hidden; 86 | } 87 | 88 | body { 89 | color: rgb(var(--foreground-rgb)); 90 | background: linear-gradient( 91 | to bottom, 92 | transparent, 93 | rgb(var(--background-end-rgb)) 94 | ) 95 | rgb(var(--background-start-rgb)); 96 | } 97 | 98 | a { 99 | color: inherit; 100 | text-decoration: none; 101 | } 102 | 103 | @media (prefers-color-scheme: dark) { 104 | html { 105 | color-scheme: dark; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /mycrud/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 18 | 19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 20 | 21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 22 | 23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 24 | 25 | ## Learn More 26 | 27 | To learn more about Next.js, take a look at the following resources: 28 | 29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 31 | 32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 33 | 34 | ## Deploy on Vercel 35 | 36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 37 | 38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 39 | -------------------------------------------------------------------------------- /mycrud/components/Footer.js: -------------------------------------------------------------------------------- 1 | export default function Footer() { 2 | return ( 3 | <> 4 | 5 | 6 | 7 | 8 | 9 | Muhammed Essa copyright 2023 10 | 11 | 12 | 13 | ) 14 | } -------------------------------------------------------------------------------- /mycrud/components/Header.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | export default function Header() { 4 | return ( 5 | <> 6 | 23 | 24 | ) 25 | } -------------------------------------------------------------------------------- /mycrud/components/MainLayout.js: -------------------------------------------------------------------------------- 1 | import Footer from "./Footer" 2 | import Header from "./Header" 3 | 4 | 5 | 6 | export default function MainLayout(props) { 7 | return ( 8 | <> 9 |
10 | {props.children} 11 |