├── .eslintrc.json ├── README.md ├── pages ├── 404.js ├── about.js ├── _app.js ├── movies │ └── [...params].js └── index.js ├── public ├── favicon.ico └── vercel.svg ├── components ├── Seo.js ├── Layout.js └── NavBar.js ├── package.json ├── styles └── globals.css ├── .gitignore └── next.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NextJS Introduction 2 | 3 | Learning NextJS by building a tiny movie website. 4 | -------------------------------------------------------------------------------- /pages/404.js: -------------------------------------------------------------------------------- 1 | export default function NotFound() { 2 | return "what are u doing here?"; 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/nextjs-fundamentals/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /components/Seo.js: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | 3 | export default function Seo({ title }) { 4 | return ( 5 | 6 | {title} | Next Movies 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /components/Layout.js: -------------------------------------------------------------------------------- 1 | import NavBar from "./NavBar"; 2 | 3 | export default function Layout({ children }) { 4 | return ( 5 | <> 6 | 7 |
{children}
8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /pages/about.js: -------------------------------------------------------------------------------- 1 | import Seo from "../components/Seo"; 2 | 3 | export default function Potato() { 4 | return ( 5 |
6 | 7 |

About

8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Layout from "../components/Layout"; 2 | import "../styles/globals.css"; 3 | 4 | export default function MyApp({ Component, pageProps }) { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-intro", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "next": "12.0.7", 12 | "react": "17.0.2", 13 | "react-dom": "17.0.2" 14 | }, 15 | "devDependencies": { 16 | "eslint": "8.4.1", 17 | "eslint-config-next": "12.0.7" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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 | body { 10 | max-width: 520px; 11 | width: 100%; 12 | margin: 0 auto; 13 | } 14 | 15 | a { 16 | color: inherit; 17 | text-decoration: none; 18 | } 19 | 20 | * { 21 | box-sizing: border-box; 22 | } 23 | -------------------------------------------------------------------------------- /pages/movies/[...params].js: -------------------------------------------------------------------------------- 1 | import Seo from "../../components/Seo"; 2 | import { useRouter } from "next/router"; 3 | 4 | export default function Detail({ params }) { 5 | const router = useRouter(); 6 | const [title, id] = params || []; 7 | return ( 8 |
9 | 10 |

{title}

11 |
12 | ); 13 | } 14 | 15 | export function getServerSideProps({ params: { params } }) { 16 | return { 17 | props: { 18 | params, 19 | }, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /.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 | .env -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const API_KEY = process.env.API_KEY; 2 | 3 | module.exports = { 4 | reactStrictMode: true, 5 | async redirects() { 6 | return [ 7 | { 8 | source: "/old-blog/:path*", 9 | destination: "/new-sexy-blog/:path*", 10 | permanent: false, 11 | }, 12 | ]; 13 | }, 14 | async rewrites() { 15 | return [ 16 | { 17 | source: "/api/movies", 18 | destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`, 19 | }, 20 | { 21 | source: "/api/movies/:id", 22 | destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`, 23 | }, 24 | ]; 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /components/NavBar.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { useRouter } from "next/router"; 3 | 4 | export default function NavBar() { 5 | const router = useRouter(); 6 | return ( 7 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { useRouter } from "next/router"; 3 | import Seo from "../components/Seo"; 4 | 5 | export default function Home({ results }) { 6 | const router = useRouter(); 7 | const onClick = (id, title) => { 8 | router.push(`/movies/${title}/${id}`); 9 | }; 10 | return ( 11 |
12 | 13 | {results?.map((movie) => ( 14 |
onClick(movie.id, movie.original_title)} 16 | className="movie" 17 | key={movie.id} 18 | > 19 | 20 |

21 | 22 | {movie.original_title} 23 | 24 |

25 |
26 | ))} 27 | 51 |
52 | ); 53 | } 54 | 55 | export async function getServerSideProps() { 56 | const { results } = await ( 57 | await fetch(`http://localhost:3000/api/movies`) 58 | ).json(); 59 | return { 60 | props: { 61 | results, 62 | }, 63 | }; 64 | } 65 | --------------------------------------------------------------------------------