├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── api │ └── hello.js ├── cars │ ├── [id].js │ └── index.js ├── hello.js └── index.js ├── public ├── cars.json ├── favicon.ico ├── ford.json ├── lambo.json ├── tesla.json └── vercel.svg └── styles ├── Home.module.css └── globals.css /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Simple Next.js Demo 2 | 3 | Watch [Next.js in 100 Seconds](https://www.youtube.com/watch?v=Sklc_fQBmcs) 4 | 5 | 6 | 7 | ``` 8 | git clone 9 | npm install 10 | npm run dev 11 | ``` 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-basic", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "next": "10.0.4", 12 | "react": "17.0.1", 13 | "react-dom": "17.0.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default (req, res) => { 4 | res.statusCode = 200 5 | res.json({ name: 'John Doe' }) 6 | } 7 | -------------------------------------------------------------------------------- /pages/cars/[id].js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import Head from 'next/head' 3 | import styles from '../../styles/Home.module.css' 4 | 5 | export default function Car({ car }) { 6 | 7 | const router = useRouter() 8 | const { id } = router.query 9 | return ( 10 |

11 | 12 | {car.color} {car.id} 13 | 14 | 15 |

16 |

17 | {id} 18 |

19 | 20 |

21 | 22 |

23 |

24 | ) 25 | } 26 | 27 | 28 | export async function getServerSideProps({ params }) { 29 | const req = await fetch(`http://localhost:3000/${params.id}.json`); 30 | const data = await req.json(); 31 | 32 | return { 33 | props: { car: data }, 34 | } 35 | } 36 | 37 | // export async function getStaticProps({ params }) { 38 | 39 | // const req = await fetch(`http://localhost:3000/${params.id}.json`); 40 | // const data = await req.json(); 41 | 42 | // return { 43 | // props: { car: data }, 44 | // } 45 | // } 46 | 47 | // export async function getStaticPaths() { 48 | 49 | // const req = await fetch('http://localhost:3000/cars.json'); 50 | // const data = await req.json(); 51 | 52 | // const paths = data.map(car => { 53 | // return { params: { id: car } } 54 | // }) 55 | 56 | // return { 57 | // paths, 58 | // fallback: false 59 | // }; 60 | // } 61 | -------------------------------------------------------------------------------- /pages/cars/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Link from 'next/link' 3 | import styles from '../../styles/Home.module.css' 4 | 5 | export default function CarsList(props) { 6 | return ( 7 |

8 |

9 |

10 | Cars list 11 |

12 | 13 |

15 | Tesla 16 |
18 | Ford 19 |
21 | Lambo 22 |

24 |

25 |

26 | ) 27 | } 28 | 29 | -------------------------------------------------------------------------------- /pages/hello.js: -------------------------------------------------------------------------------- 1 | export default function Hello() { 2 | return

hi mom

3 | } 4 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Link from 'next/link' 3 | import styles from '../styles/Home.module.css' 4 | 5 | export default function Home() { 6 | return ( 7 |

8 | 9 | Create Next App 10 | 11 | 12 | 13 |

14 |

15 | Simple Next.js demo! See Cars 16 |

17 |

18 |

19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /public/cars.json: -------------------------------------------------------------------------------- 1 | ["tesla", "ford", "lambo"] -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fireship-io/nextjs-basics/b46338fc75e3e18c5cd6d27d9a68c5d3427b2be6/public/favicon.ico -------------------------------------------------------------------------------- /public/ford.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "ford", 3 | "color": "blue", 4 | "image": "https://images.unsplash.com/photo-1551830820-330a71b99659?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 5 | } -------------------------------------------------------------------------------- /public/lambo.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "lambo", 3 | "color": "orange", 4 | "image": "https://images.unsplash.com/photo-1519440862171-af26cf8c2a85?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80" 5 | } -------------------------------------------------------------------------------- /public/tesla.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "tesla", 3 | "color": "white", 4 | "image": "https://images.unsplash.com/photo-1561580125-028ee3bd62eb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 5 | } -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .main { 11 | padding: 5rem 0; 12 | flex: 1; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .footer { 20 | width: 100%; 21 | height: 100px; 22 | border-top: 1px solid #eaeaea; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | .footer img { 29 | margin-left: 0.5rem; 30 | } 31 | 32 | .footer a { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | 38 | .title a { 39 | color: #0070f3; 40 | text-decoration: none; 41 | } 42 | 43 | .title a:hover, 44 | .title a:focus, 45 | .title a:active { 46 | text-decoration: underline; 47 | } 48 | 49 | .title { 50 | margin: 0; 51 | line-height: 1.15; 52 | font-size: 4rem; 53 | } 54 | 55 | .title, 56 | .description { 57 | text-align: center; 58 | } 59 | 60 | .description { 61 | line-height: 1.5; 62 | font-size: 1.5rem; 63 | } 64 | 65 | .code { 66 | background: #fafafa; 67 | border-radius: 5px; 68 | padding: 0.75rem; 69 | font-size: 1.1rem; 70 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 71 | Bitstream Vera Sans Mono, Courier New, monospace; 72 | } 73 | 74 | .grid { 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | flex-wrap: wrap; 79 | max-width: 800px; 80 | margin-top: 3rem; 81 | } 82 | 83 | .card { 84 | margin: 1rem; 85 | flex-basis: 45%; 86 | padding: 1.5rem; 87 | text-align: left; 88 | color: inherit; 89 | text-decoration: none; 90 | border: 1px solid #eaeaea; 91 | border-radius: 10px; 92 | transition: color 0.15s ease, border-color 0.15s ease; 93 | } 94 | 95 | .card:hover, 96 | .card:focus, 97 | .card:active { 98 | color: #0070f3; 99 | border-color: #0070f3; 100 | } 101 | 102 | .card h3 { 103 | margin: 0 0 1rem 0; 104 | font-size: 1.5rem; 105 | } 106 | 107 | .card p { 108 | margin: 0; 109 | font-size: 1.25rem; 110 | line-height: 1.5; 111 | } 112 | 113 | .logo { 114 | height: 1em; 115 | } 116 | 117 | @media (max-width: 600px) { 118 | .grid { 119 | width: 100%; 120 | flex-direction: column; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | --------------------------------------------------------------------------------