├── .gitignore
├── README.md
├── components
    ├── ArticleItem.js
    ├── ArticleList.js
    ├── Header.js
    ├── Layout.js
    ├── Meta.js
    └── Nav.js
├── config
    └── index.js
├── data.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── _document.js
    ├── about.js
    ├── api
    │   └── articles
    │   │   ├── [id].js
    │   │   └── index.js
    ├── article
    │   └── [id]
    │   │   └── index.js
    └── index.js
├── public
    ├── favicon.ico
    └── vercel.svg
└── styles
    ├── Article.module.css
    ├── Header.module.css
    ├── Layout.module.css
    ├── Nav.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 | # Next.js Crash Course Project
 2 | 
 3 | Project from my Next.js crash course on YouTube
 4 | 
 5 | ### Run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | ```
10 | 
11 | ### Build for production AND generate static website into "out" folder:
12 | 
13 | ```bash
14 | npm run build
15 | ```
16 | 
17 | ### Run in production:
18 | 
19 | ```bash
20 | npm start
21 | ```
22 | 
23 | ### API Routes:
24 | 
25 | GET /api/articles
26 | GET /api/articles/:id
27 | 


--------------------------------------------------------------------------------
/components/ArticleItem.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import articleStyles from '../styles/Article.module.css'
 3 | 
 4 | const ArticleItem = ({ article }) => {
 5 |   return (
 6 |     <Link href={`/article/${article.id}`}>
 7 |       <a className={articleStyles.card}>
 8 |         <h3>{article.title} &rarr;</h3>
 9 |         <p>{article.excerpt}</p>
10 |       </a>
11 |     </Link>
12 |   )
13 | }
14 | 
15 | export default ArticleItem
16 | 


--------------------------------------------------------------------------------
/components/ArticleList.js:
--------------------------------------------------------------------------------
 1 | import ArticleItem from './ArticleItem'
 2 | import articleStyles from '../styles/Article.module.css'
 3 | 
 4 | const ArticleList = ({ articles }) => {
 5 |   return (
 6 |     <div className={articleStyles.grid}>
 7 |       {articles.map((article) => (
 8 |         <ArticleItem article={article} />
 9 |       ))}
10 |     </div>
11 |   )
12 | }
13 | 
14 | export default ArticleList
15 | 


--------------------------------------------------------------------------------
/components/Header.js:
--------------------------------------------------------------------------------
 1 | import headerStyles from '../styles/Header.module.css'
 2 | 
 3 | const Header = () => {
 4 |   return (
 5 |     <div>
 6 |       <h1 className={headerStyles.title}>
 7 |         <span>WebDev</span> News
 8 |       </h1>
 9 |       <p className={headerStyles.description}>
10 |         Keep up to date with the latest web dev news
11 |       </p>
12 |     </div>
13 |   )
14 | }
15 | 
16 | export default Header
17 | 


--------------------------------------------------------------------------------
/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import Nav from './Nav'
 2 | import Meta from './Meta'
 3 | import Header from './Header'
 4 | import styles from '../styles/Layout.module.css'
 5 | 
 6 | const Layout = ({ children }) => {
 7 |   return (
 8 |     <>
 9 |       <Meta />
10 |       <Nav />
11 |       <div className={styles.container}>
12 |         <main className={styles.main}>
13 |           <Header />
14 |           {children}
15 |         </main>
16 |       </div>
17 |     </>
18 |   )
19 | }
20 | 
21 | export default Layout
22 | 


--------------------------------------------------------------------------------
/components/Meta.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | 
 3 | const Meta = ({ title, keywords, description }) => {
 4 |   return (
 5 |     <Head>
 6 |       <meta name='viewport' content='width=device-width, initial-scale=1' />
 7 |       <meta name='keywords' content={keywords} />
 8 |       <meta name='description' content={description} />
 9 |       <meta charSet='utf-8' />
10 |       <link rel='icon' href='/favicon.ico' />
11 |       <title>{title}</title>
12 |     </Head>
13 |   )
14 | }
15 | 
16 | Meta.defaultProps = {
17 |   title: 'WebDev Newz',
18 |   keywords: 'web development, programming',
19 |   description: 'Get the latest news in web dev',
20 | }
21 | 
22 | export default Meta
23 | 


--------------------------------------------------------------------------------
/components/Nav.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import navStyles from '../styles/Nav.module.css'
 3 | 
 4 | const Nav = () => {
 5 |   return (
 6 |     <nav className={navStyles.nav}>
 7 |       <ul>
 8 |         <li>
 9 |           <Link href='/'>Home</Link>
10 |         </li>
11 |         <li>
12 |           <Link href='/about'>About</Link>
13 |         </li>
14 |       </ul>
15 |     </nav>
16 |   )
17 | }
18 | 
19 | export default Nav
20 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | const dev = process.env.NODE_ENV !== 'production'
2 | 
3 | export const server = dev ? 'http://localhost:3000' : 'https://yourwebsite.com'
4 | 


--------------------------------------------------------------------------------
/data.js:
--------------------------------------------------------------------------------
 1 | export const articles = [
 2 |   {
 3 |     id: '1',
 4 |     title: 'GitHub introduces dark mode and auto-merge pull request',
 5 |     excerpt:
 6 |       'GitHub today announced a bunch of new features at its virtual GitHub...',
 7 |     body:
 8 |       'GitHub today announced a bunch of new features at its virtual GitHub Universe conference including dark mode, auto-merge pull requests, and Enterprise Server 3.0. In the past couple of years, almost all major apps have rolled out a dark theme for its users, so why not GitHub?',
 9 |   },
10 |   {
11 |     id: '2',
12 |     title: 'What’s multi-cloud? And why should developers care?',
13 |     excerpt: 'Most developers don’t care about multi-cloud. But they should...',
14 |     body:
15 |       'Most developers don’t care about multi-cloud. But they should. Whether developers know it or not, their companies likely already have a multi-cloud environment.    Multi-cloud is a strategy where a business selects different services from different cloud providers',
16 |   },
17 |   {
18 |     id: '3',
19 |     title: 'Here is how to make your website more accessible',
20 |     excerpt:
21 |       'An accessible website is one that’s optimized for all people, including those with disabilities...',
22 |     body:
23 |       'There are many things to consider when setting up a website, and accessibility is one factor that can sometimes be overlooked. An accessible website is one that’s optimized for all people, including those with impaired vision or hearing, motor difficulties, or learning disabilities',
24 |   },
25 |   {
26 |     id: '4',
27 |     title: 'Why open ecosystems are the future of app development',
28 |     excerpt:
29 |       'When app stores entered the mainstream tech culture, they exposed developers to an audience of millions...',
30 |     body:
31 |       'We can’t get enough of our mobile apps. There were 204 billion apps downloads last year, and that number is rising in 2020.  When app stores entered the mainstream tech culture, they exposed developers to an audience of millions who were keen to adopt the innovative capabilities',
32 |   },
33 | ]
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-crash-course",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build && next export",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "next": "10.0.5",
12 |     "react": "17.0.1",
13 |     "react-dom": "17.0.1"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import Layout from '../components/Layout'
 2 | import '../styles/globals.css'
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <Layout>
 7 |       <Component {...pageProps} />
 8 |     </Layout>
 9 |   )
10 | }
11 | 
12 | export default MyApp
13 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | class MyDocument extends Document {
 4 |   render() {
 5 |     return (
 6 |       <Html lang='en'>
 7 |         <Head />
 8 |         <body>
 9 |           <Main />
10 |           <NextScript />
11 |         </body>
12 |       </Html>
13 |     )
14 |   }
15 | }
16 | 
17 | export default MyDocument
18 | 


--------------------------------------------------------------------------------
/pages/about.js:
--------------------------------------------------------------------------------
 1 | import Meta from '../components/Meta'
 2 | 
 3 | const about = () => {
 4 |   return (
 5 |     <div>
 6 |       <Meta title='About' />
 7 |       <h1>About</h1>
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export default about
13 | 


--------------------------------------------------------------------------------
/pages/api/articles/[id].js:
--------------------------------------------------------------------------------
 1 | import { articles } from '../../../data'
 2 | 
 3 | export default function handler({ query: { id } }, res) {
 4 |   const filtered = articles.filter((article) => article.id === id)
 5 | 
 6 |   if (filtered.length > 0) {
 7 |     res.status(200).json(filtered[0])
 8 |   } else {
 9 |     res
10 |       .status(404)
11 |       .json({ message: `Article with the id of ${id} is not found` })
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/api/articles/index.js:
--------------------------------------------------------------------------------
1 | import { articles } from '../../../data'
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json(articles)
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/article/[id]/index.js:
--------------------------------------------------------------------------------
 1 | import { server } from '../../../config'
 2 | import Link from 'next/link'
 3 | import { useRouter } from 'next/router'
 4 | import Meta from '../../../components/Meta'
 5 | 
 6 | const article = ({ article }) => {
 7 |   // const router = useRouter()
 8 |   // const { id } = router.query
 9 | 
10 |   return (
11 |     <>
12 |       <Meta title={article.title} description={article.excerpt} />
13 |       <h1>{article.title}</h1>
14 |       <p>{article.body}</p>
15 |       <br />
16 |       <Link href='/'>Go Back</Link>
17 |     </>
18 |   )
19 | }
20 | 
21 | export const getStaticProps = async (context) => {
22 |   const res = await fetch(`${server}/api/articles/${context.params.id}`)
23 | 
24 |   const article = await res.json()
25 | 
26 |   return {
27 |     props: {
28 |       article,
29 |     },
30 |   }
31 | }
32 | 
33 | export const getStaticPaths = async () => {
34 |   const res = await fetch(`${server}/api/articles`)
35 | 
36 |   const articles = await res.json()
37 | 
38 |   const ids = articles.map((article) => article.id)
39 |   const paths = ids.map((id) => ({ params: { id: id.toString() } }))
40 | 
41 |   return {
42 |     paths,
43 |     fallback: false,
44 |   }
45 | }
46 | 
47 | // export const getStaticProps = async (context) => {
48 | //   const res = await fetch(
49 | //     `https://jsonplaceholder.typicode.com/posts/${context.params.id}`
50 | //   )
51 | 
52 | //   const article = await res.json()
53 | 
54 | //   return {
55 | //     props: {
56 | //       article,
57 | //     },
58 | //   }
59 | // }
60 | 
61 | // export const getStaticPaths = async () => {
62 | //   const res = await fetch(`https://jsonplaceholder.typicode.com/posts`)
63 | 
64 | //   const articles = await res.json()
65 | 
66 | //   const ids = articles.map((article) => article.id)
67 | //   const paths = ids.map((id) => ({ params: { id: id.toString() } }))
68 | 
69 | //   return {
70 | //     paths,
71 | //     fallback: false,
72 | //   }
73 | // }
74 | 
75 | export default article
76 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { server } from '../config'
 2 | import ArticleList from '../components/ArticleList'
 3 | 
 4 | export default function Home({ articles }) {
 5 |   return (
 6 |     <div>
 7 |       <ArticleList articles={articles} />
 8 |     </div>
 9 |   )
10 | }
11 | 
12 | export const getStaticProps = async () => {
13 |   const res = await fetch(`${server}/api/articles`)
14 |   const articles = await res.json()
15 | 
16 |   return {
17 |     props: {
18 |       articles,
19 |     },
20 |   }
21 | }
22 | 
23 | // export const getStaticProps = async () => {
24 | //   const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=6`)
25 | //   const articles = await res.json()
26 | 
27 | //   return {
28 | //     props: {
29 | //       articles,
30 | //     },
31 | //   }
32 | // }
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/next-crash-course/b0e6eaa779c3ca39b7004fcc3f6a796e7d458340/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/Article.module.css:
--------------------------------------------------------------------------------
 1 | .grid {
 2 |   display: flex;
 3 |   align-items: center;
 4 |   justify-content: center;
 5 |   flex-wrap: wrap;
 6 |   max-width: 800px;
 7 |   margin-top: 3rem;
 8 | }
 9 | 
10 | .card {
11 |   margin: 1rem;
12 |   flex-basis: 45%;
13 |   padding: 1.5rem;
14 |   text-align: left;
15 |   color: inherit;
16 |   text-decoration: none;
17 |   border: 1px solid #eaeaea;
18 |   border-radius: 10px;
19 |   transition: color 0.15s ease, border-color 0.15s ease;
20 | }
21 | 
22 | .card:hover,
23 | .card:focus,
24 | .card:active {
25 |   color: #0070f3;
26 |   border-color: #0070f3;
27 | }
28 | 
29 | .card h3 {
30 |   margin: 0 0 1rem 0;
31 |   font-size: 1.5rem;
32 | }
33 | 
34 | .card p {
35 |   margin: 0;
36 |   font-size: 1.25rem;
37 |   line-height: 1.5;
38 | }
39 | 
40 | .logo {
41 |   height: 1em;
42 | }
43 | 
44 | @media (max-width: 600px) {
45 |   .grid {
46 |     width: 100%;
47 |     flex-direction: column;
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/styles/Header.module.css:
--------------------------------------------------------------------------------
 1 | .title a,
 2 | .title span {
 3 |   color: #0070f3;
 4 |   text-decoration: none;
 5 | }
 6 | 
 7 | .title a:hover,
 8 | .title a:focus,
 9 | .title a:active {
10 |   text-decoration: underline;
11 | }
12 | 
13 | .title {
14 |   margin: 0;
15 |   line-height: 1.15;
16 |   font-size: 4rem;
17 | }
18 | 
19 | .title,
20 | .description {
21 |   text-align: center;
22 | }
23 | 
24 | .description {
25 |   line-height: 1.5;
26 |   font-size: 1.5rem;
27 | }
28 | 


--------------------------------------------------------------------------------
/styles/Layout.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   min-height: 100vh;
 3 |   padding: 0 0.5rem;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: flex-start;
 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: flex-start;
16 |   align-items: center;
17 |   font-size: 1.25rem;
18 | }
19 | 


--------------------------------------------------------------------------------
/styles/Nav.module.css:
--------------------------------------------------------------------------------
 1 | .nav {
 2 |   height: 50px;
 3 |   padding: 10px;
 4 |   background: #000;
 5 |   color: #fff;
 6 |   display: flex;
 7 |   align-items: center;
 8 |   justify-content: flex-start;
 9 | }
10 | 
11 | .nav ul {
12 |   display: flex;
13 |   justify-content: center;
14 |   align-items: center;
15 |   list-style: none;
16 | }
17 | 
18 | .nav ul li a {
19 |   margin: 5px 15px;
20 | }
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------