Loading...
107 | }
108 |
109 | ...
110 | }
111 | ```
112 |
113 | If we don't want to display a Loading page, we can set the `fallback` property in `getStaticPaths` to `'blocking'`. This will make the browser wait for Next.js to pre-render the HTML.
114 |
115 | ## 🚀 Exercise
116 |
117 | Display a page with a list of genres (like in [Exercise 03](../exercise-03--create-dynamic-routes)) and provide the genres using `getStaticProps`.
118 |
119 | ## ⭐️ Challenge
120 |
121 | Make a dynamic "genre" page that will display a sentence explaining the genre.
122 |
123 | ## 🍩 Exercise Feedback form
124 |
125 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+12+-+Use+the+Static+Generation+method) so you can elaborate on what you learned and give me feedback so I can improve it for future learners.
--------------------------------------------------------------------------------
/exercises/exercise-12--use-the-static-generation-method/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// -
13 | {genres.map((genre) => (
14 |
-
15 | {genres.map((genre) => (
16 |
-
34 | {users.map(({ id, name }) => (
35 |
-
14 |
- 15 | Sign up to Vercel (it's free, no credit card needed) 16 | 17 |
-
18 | 19 |25 |
20 | Then you'll see the "Import Project" page. Pick the Git provider you host your app's source at. 21 |
22 | 23 |  24 |
26 | -
27 | 28 |32 |
After you've authenticated with your Git provider, you will see a list of your repos. Find the app you want to deploy and click on the "Import" button.
29 | 30 |  31 |
33 | -
34 | 35 |41 |
36 | Vercel will automatically figure out that it's a Next.js project, and it will apply the defaults for you. If you use any Environment Variables, make sure you add them in the "Environments Variables" section. 37 |
38 | 39 |  40 |
42 |
43 | - 44 | When you're ready, hit the "Deploy" button and you app will be built and deployed in a few minutes. 45 | 46 |
9 |
10 | Create Next App
11 |
12 |
13 |
14 |
15 |
16 |
55 |
56 |
68 |
69 | )
70 | }
71 |
72 | export default Home
73 |
--------------------------------------------------------------------------------
/final/exercise-01--create-a-new-next-js-type-script-project/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikolovlazar/egghead-beginners-guide-nextjs/39d79b47c699e9c4c606da2942ffa5b1c3b3816a/final/exercise-01--create-a-new-next-js-type-script-project/public/favicon.ico
--------------------------------------------------------------------------------
/final/exercise-01--create-a-new-next-js-type-script-project/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/final/exercise-01--create-a-new-next-js-type-script-project/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/final/exercise-01--create-a-new-next-js-type-script-project/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 |
--------------------------------------------------------------------------------
/final/exercise-01--create-a-new-next-js-type-script-project/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true
17 | },
18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 | "exclude": ["node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/final/exercise-02--create-and-navigate-between-pages/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-02--create-and-navigate-between-pages/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-02--create-and-navigate-between-pages/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 02: Create and navigate between pages
2 |
3 | ## Background
4 |
5 | In Next.js, every page is a React component that lives in the `pages/` directory. Every other React component that lives outside of the `pages/` directory is not being considered as a page. Next.js's built-in router generates our routes automatically based on our project structure. For example:
6 |
7 | - The index `/` page would be the `pages/index.tsx` file,
8 | - The `/about` page would be `pages/about.tsx` file,
9 | - The `docs/getting-started` page would be `pages/docs/getting-started.tsx` file, and so on.
10 |
11 | To navigate between pages, Next.js provides us a `Link` component that's exported from the `next/link` package. To create a link to our About page, we can do the following:
12 |
13 | ```typescript
14 | import Link from 'next/link'
15 |
16 | const Home = () => {
17 | return (
18 | About
19 | )
20 | }
21 |
22 | export default Home;
23 | ```
24 |
25 | ## 🚀 Exercise
26 |
27 | Create a new "About" page and add a link in the Home page to it.
28 |
29 | ## 🍩 Exercise Feedback form
30 |
31 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+02+-+Create+and+navigate+between+pages) so you can elaborate on what you learned and give me feedback so I can improve it for future learners.
--------------------------------------------------------------------------------
/final/exercise-02--create-and-navigate-between-pages/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 17 | Welcome to Next.js! 18 |
19 | 20 |
21 | Get started by editing{' '}
22 | pages/index.tsx
23 |
26 |
27 |
54 | Documentation →
28 |Find in-depth information about Next.js features and API.
29 | 30 | 31 | 32 |Learn →
33 |Learn about Next.js in an interactive course with quizzes!
34 | 35 | 36 | 40 |Examples →
41 |Discover and deploy boilerplate example Next.js projects.
42 | 43 | 44 | 48 |Deploy →
49 |50 | Instantly deploy your Next.js site to a public URL with Vercel. 51 |
52 | 53 |
6 |
9 | )
10 | }
11 |
12 | export default About
13 |
--------------------------------------------------------------------------------
/final/exercise-02--create-and-navigate-between-pages/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | const Home = () => {
4 | return (
5 | Hello from the About page 👋!
7 | Back to the Home page 8 |
6 |
9 | )
10 | }
11 |
12 | export default Home
13 |
--------------------------------------------------------------------------------
/final/exercise-02--create-and-navigate-between-pages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-03--create-dynamic-routes/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-03--create-dynamic-routes/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-03--create-dynamic-routes/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 03: Create Dynamic Routes
2 |
3 | ## Background
4 |
5 | We learned in the previous exercise that Next.js treats our files in the `pages/` directory as pages, and it automatically generates routes for us. But, what if we wanted to create a page with a dynamic route? You can add brackets around the page's name (`[pid].tsx`) to create a dynamic route.
6 |
7 | Let's say we have a page in `pages/post/[pid].tsx`:
8 |
9 | ```typescript
10 | import { useRouter } from 'next/router'
11 |
12 | const Post = () => {
13 | const router = useRouter()
14 | const { pid } = router.query
15 |
16 | return Welcome to the Home page!
7 | Go to About page 8 |Post: {pid}
17 | } 18 | 19 | export default Post 20 | ``` 21 | 22 | Any route like `/post/1`, `/post/hello-world`, etc. will be matched by the `[pid].tsx` page. The dynamic parameter `pid` will be available to us as a query parameter through Next.js's router. 23 | 24 | If we want to have a multi-segment dynamic route, we can wrap the folders' names with brackets too, for example `pages/post/[pid]/[comment].tsx`. The router's query will merge the two dynamic segments, so if we visited `/post/hello-world/love-it`, the `query` object will be: 25 | ```typescript 26 | { pid: "hello-world", comment: "love-it" } 27 | ``` 28 | 29 | ## 🚀 Exercise 30 | 31 | Create a genre page that will display the genre's name dynamically. Examples: 32 | - `/rock` 33 | - `/country` 34 | - `/pop` 35 | 36 | ## ⭐️ Challenge 37 | 38 | Make a new dynamic page that will display the artist's name and their music genre. Examples: 39 | - `/rock/axl-rose` should display "axl-rose is a rock music artist!" 40 | - `/country/chris-stapleton` should display "chris-stapleton is a country music artist!" 41 | - `/pop/bruno-mars` should display "bruno-mars is a pop music artist!" 42 | 43 | ## 🚩 Checkpoint 44 | This exercise marks the first checkpoint at which we'll go into breakout rooms to do the following exercises: 45 | - [Exercise 01: Create a new Next.js TypeScript project](../exercise-01--create-a-new-next-js-type-script-project) 46 | - [Exercise 02: Create and navigate between pages](../exercise-02--create-and-navigate-between-pages) 47 | - [Exercise 03: Create Dynamic Routes](../exercise-03--create-dynamic-routes) 48 | 49 | Start with the first exercise, and work your way through the last one. If you're stuck, do not hesitate to ask. As soon as you're done you can fill out either the [Post-Breakout Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLSda0BFV57OWbSkshNC_jZ809HEBOuW_MzLEz1Bq4PVKtI7R9w/viewform?usp=pp_url&entry.651170566=Group+1:+New+Project,+Pages+%26+Navigation,+Dynamic+Routes), or the feedback forms for each individual exercise. I would appreciate your feedback a lot. 50 | 51 | ## 🍩 Exercise Feedback form 52 | 53 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+03+-+Create+Dynamic+Routes) so you can elaborate on what you learned and give me feedback so I can improve it for future learners. -------------------------------------------------------------------------------- /final/exercise-03--create-dynamic-routes/next-env.d.ts: -------------------------------------------------------------------------------- 1 | ///11 | {artist} is a {genre} music artist! 12 |
13 |
14 | Back
15 |
16 |
17 | )
18 | }
19 |
20 | export default Artist
21 |
--------------------------------------------------------------------------------
/final/exercise-03--create-dynamic-routes/pages/[genre]/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router'
2 | import Link from 'next/link'
3 |
4 | const Genre = () => {
5 | const router = useRouter()
6 | const { genre } = router.query
7 |
8 | return (
9 | <>
10 | I like {genre} music!
11 |
12 | Back
13 |
14 |
15 | )
16 | }
17 |
18 | export default Genre
19 |
--------------------------------------------------------------------------------
/final/exercise-03--create-dynamic-routes/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | const Home = () => {
4 | const songs = ['rock', 'country', 'pop']
5 | const artistsNSongs = [
6 | { artistName: 'Michael Jackson', song: 'Soul' },
7 | { artistName: 'Whitney Houston', song: 'RNB' },
8 | { artistName: 'Taylor Swift', song: 'Pop' }
9 | ]
10 | return (
11 |
12 |
33 | )
34 | }
35 |
36 | export default Home
37 |
--------------------------------------------------------------------------------
/final/exercise-03--create-dynamic-routes/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-04--serve-static-assets/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-04--serve-static-assets/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-04--serve-static-assets/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 04: Serve static assets
2 |
3 | ## Background
4 |
5 | Aside from `pages`, there is another "specialized" folder called `public`. Next.js serves everything in the `public` folder statically, starting from the base URL `/`. If we had an image `public/lazar.png` we can view it on `http://localhost:3000/lazar.png`, or we can reference it in our code:
6 |
7 | ```typescript
8 | const Avatar = () => {
9 | return My favorite music genres are :
13 |-
14 | {songs.map((song) => (
15 |
- 16 | {song} 17 | 18 | ))} 19 |
My favorite artists and their most popular genres
21 |-
22 | {artistsNSongs.map((artistNSong) => (
23 |
- 24 | 25 | 26 | {artistNSong.artistName} - {artistNSong.song} 27 | 28 | 29 | 30 | ))} 31 |
10 | }
11 |
12 | export default Avatar
13 | ```
14 |
15 | The `public` folder is also useful for the `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files, including HTML files.
16 |
17 | ## 🚀 Exercise
18 |
19 | Add the `"lazar.png"` image (which is at the root of this project) to the Home page.
20 |
21 | ## 🍩 Exercise Feedback form
22 |
23 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+04+-+Serve+static+assets) so you can elaborate on what you learned and give me feedback so I can improve it for future learners.
--------------------------------------------------------------------------------
/final/exercise-04--serve-static-assets/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
4 |
7 |
8 | )
9 | }
10 |
11 | export default Home
12 |
--------------------------------------------------------------------------------
/final/exercise-04--serve-static-assets/public/lazar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikolovlazar/egghead-beginners-guide-nextjs/39d79b47c699e9c4c606da2942ffa5b1c3b3816a/final/exercise-04--serve-static-assets/public/lazar.png
--------------------------------------------------------------------------------
/final/exercise-04--serve-static-assets/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-05--use-next-image-for-image-optimization/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-05--use-next-image-for-image-optimization/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-05--use-next-image-for-image-optimization/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 05: Use `next/image` for Image Optimization
2 |
3 | ## Background
4 |
5 | We can always use the good old `Hello 👋
5 |My name is Lazar Nikolov
6 |
7 |
19 |
21 |
22 | )
23 | }
24 |
25 | export default Home
26 | ```
27 |
28 | The content in the `Head` component can be composed of local hardcoded data, and also obtained from an API or CMS. In order to avoid duplicates, we can use the `key` prop, which will make sure that the tag is going to be rendered only once:
29 |
30 | ```typescript
31 | // pages/index.tsx
32 |
33 | import Head from 'next/head'
34 |
35 | const Home = () => {
36 | return (
37 | <>
38 |
39 | Homepage
20 |
47 |
49 |
50 | )
51 | }
52 |
53 | export default Home
54 | ```
55 |
56 | In this case, only the second ("My Next.js course") tag is going to be rendered.
57 |
58 | > The contents of the `Head` component get cleared upon unmounting the component, so make sure that each page completely defines what it needs without making assumptions about what other pages added.
59 |
60 | The `title`, `meta`, or any other elements need to be direct children of the `Head` component, or wrapped into maximum one level of `Homepage
48 |
8 |
11 | )
12 | }
13 |
14 | export default Home
15 |
--------------------------------------------------------------------------------
/final/exercise-07--override-the-app-component/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-08--override-the-document/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-08--override-the-document/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-08--override-the-document/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 08: Override the Document
2 |
3 | ## Background
4 | Just like `_app.tsx`, we can also override the `_document.tsx` file. We can use a custom `Document` to augment our application's `` and `` tags, like setting the `lang` property of the `` tag, adding third-party scripts, linking custom fonts, add analytics scripts etc...
5 |
6 | To override the default `Document`, we need to create a file `pages/_document.tsx`:
7 |
8 | ```typescript
9 | import { Html, Head, Main, NextScript } from 'next/document'
10 |
11 | export default function Document() {
12 | return (
13 |
14 | Overriding the App component
9 |Title: {title}
10 |
4 |
7 | )
8 | }
9 |
10 | export default Home
11 |
--------------------------------------------------------------------------------
/final/exercise-08--override-the-document/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 09: Create custom style
2 |
3 | ## Background
4 |
5 | In Next.js, there are several ways to achieve custom styles:
6 | - [Adding a Global Stylesheet](#adding-a-global-stylesheet)
7 | - [Component-level CSS](#component-level-css)
8 | - [CSS-in-JS](#css-in-js)
9 |
10 | ### Adding a Global Stylesheet
11 | To add a global stylesheet, we need to import it in the `pages/_app.tsx` file. If we haven't overriden the `App` yet, we should do that first.
12 |
13 | Let's say we have the following file `styles.css` at the root of the project:
14 |
15 | ```css
16 | body {
17 | font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
18 | 'Arial', sans-serif;
19 | padding: 20px 20px 60px;
20 | max-width: 680px;
21 | margin: 0 auto;
22 | }
23 | ```
24 |
25 | To use it, we need to simply import it in our `_app.tsx` file:
26 |
27 | ```typescript
28 | import type { AppProps } from 'next/app'
29 |
30 | import '../styles.css'
31 |
32 | const App = ({ Component, pageProps }: AppProps) => {
33 | return We are overriding the Document in Next.js
5 |Nothing to see here
6 |` using CSS-in-JS
97 | - Create a "Log in" `Button` component that uses CSS Modules and put it in the flexbox
98 |
99 | ## 🍩 Exercise Feedback form
100 |
101 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+09+-+Create+custom+style) so you can elaborate on what you learned and give me feedback so I can improve it for future learners.
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// {children}
32 |
33 |
34 | )
35 | }
36 |
37 | export default Layout
38 | ```
39 |
40 | In order to use this custom layout, we can wrap the `Component` component in our `_app.tsx` file:
41 |
42 | ```typescript
43 | // pages/_app.tsx
44 |
45 | import type { AppProps } from 'next/app'
46 |
47 | import Layout from 'src/components/layout'
48 |
49 | const App = ({ Component, pageProps }: AppProps) => {
50 | return (
51 |
52 |
54 | )
55 | }
56 |
57 | export default App
58 | ```
59 |
60 | Since the `Layout` component is reused when changing pages, its component state will be preserved.
61 |
62 | ## Per-Page Layouts
63 |
64 | If we want to have multiple layouts (ex. authentication, dashboard, settings etc...), we can define a `getLayout` property to our pages that will receive the page in `props`, and wrap it in the layout that we want. Since we're returning a function, we can have complex nested layouts if we wanted to.
65 |
66 | Here's an example of a page:
67 |
68 | ```typescript
69 | // pages/index.tsx
70 |
71 | import type { ReactElement } from 'react'
72 |
73 | import Layout from 'src/components/layout'
74 | import NestedLayout from 'src/components/nested-layout'
75 |
76 | const Page = () => {
77 | return (
78 | // Our page's content...
79 | )
80 | }
81 |
82 | Page.getLayout = (page: ReactElement) => {
83 | return (
84 |
85 | {page}
86 |
87 | )
88 | }
89 |
90 | export default Page
91 | ```
92 |
93 | In order to use this, we need to make some changes in our `_app.tsx`:
94 |
95 | ```typescript
96 | // pages/_app.tsx
97 |
98 | import type { ReactElement, ReactNode } from 'react'
99 | import type { NextPage } from 'next'
100 | import type { AppProps } from 'next/app'
101 |
102 | type NextPageWithLayout = NextPage & {
103 | // define the getLayout method for every page
104 | getLayout?: (page: ReactElement) => ReactNode
105 | }
106 |
107 | type AppPropsWithLayout = AppProps & {
108 | // override the default Component definition
109 | Component: NextPageWithLayout
110 | }
111 |
112 | const App = ({ Component, pageProps }: AppPropsWithLayout) => {
113 | // use the getLayout defined in each page
114 | // if it doesn't exist, provide a fallback
115 | const getLayout = Component.getLayout ?? ((page) => page)
116 |
117 | return getLayout({getLayout(
23 | )
24 | }
25 |
26 | export default App
27 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 | import { Heading } from '@chakra-ui/react'
3 |
4 | import Layout from '../src/components/layout'
5 |
6 | const Home = () => {
7 | return (
8 |
9 | This is our homepage content!
10 |
11 | )
12 | }
13 |
14 | Home.getLayout = (page: ReactNode) => {
15 | return {page}
16 | }
17 |
18 | export default Home
19 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/src/components/layout/footer.tsx:
--------------------------------------------------------------------------------
1 | import { Container, SimpleGrid, Link } from '@chakra-ui/react'
2 |
3 | const Footer = () => {
4 | return (
5 |
14 |
15 | Link
16 | Link
17 | Link
18 | Link
19 | Link
20 | Link
21 | Link
22 | Link
23 | Link
24 |
25 |
26 | )
27 | }
28 |
29 | export default Footer
30 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/src/components/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 |
3 | import Navbar from './navbar'
4 | import Footer from './footer'
5 |
6 | type Props = {
7 | children?: ReactNode
8 | }
9 |
10 | const Layout = ({ children }: Props) => {
11 | return (
12 | <>
13 | {children}
15 |
16 |
17 | )
18 | }
19 |
20 | export default Layout
21 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/src/components/layout/navbar.tsx:
--------------------------------------------------------------------------------
1 | import { HStack, Container, Heading, Button } from '@chakra-ui/react'
2 |
3 | const Navbar = () => {
4 | return (
5 |
6 |
7 | Next.js
8 |
9 |
10 |
11 | )
12 | }
13 |
14 | export default Navbar
15 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-11--use-ui-frameworks-like-chakra-ui/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-11--use-ui-frameworks-like-chakra-ui/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-11--use-ui-frameworks-like-chakra-ui/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 11: Use UI frameworks like Chakra UI
2 |
3 | ## Background
4 | In [Exercise 09](../exercise-09--create-custom-style) we learned how to create and use CSS files. But, most of the developers use UI frameworks to make their life easier. Using a UI framework like Chakra UI in combination with Next.js will supercharge your feature development and make the styling of your app even easier.
5 |
6 | Frameworks like [Chakra UI](https://chakra-ui.com) utilize the React Context API to configure your web app's theme and ensure consistent styles. As we mentioned in the [Exercise 07](../exercise-07--override-the-app-component), we can override the `App` component to persist layout between page changes and inject additional data into pages. That's where we can add the `ChakraProvider`. Chakra UI also comes with a `ColorModeScript` specifically built for Next.js that we need to put in our custom `Document`, which we learned how to override in [Exercise 08](../exercise-08--override-the-document).
7 |
8 | ## 🚀 Exercise
9 | Configure Chakra UI in your project.
10 |
11 | ## 🚩 Checkpoint
12 | This exercise marks the third checkpoint at which we'll go into breakout rooms to do the following exercises:
13 | - [Exercise 07: Override the App Component](../exercise-07--override-the-app-component)
14 | - [Exercise 08: Override the Document](../exercise-08--override-the-document)
15 | - [Exercise 09: Create custom style](../exercise-09--create-custom-style)
16 | - [Exercise 10: Create custom layout](../exercise-10--create-custom-layouts)
17 | - [Exercise 11: Use UI frameworks like Chakra UI](../exercise-11--use-ui-frameworks-like-chakra-ui)
18 |
19 | Start with the first exercise, and work your way through the last one. If you're stuck, do not hesitate to ask. As soon as you're done you can fill out either the [Post-Breakout Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLSda0BFV57OWbSkshNC_jZ809HEBOuW_MzLEz1Bq4PVKtI7R9w/viewform?usp=pp_url&entry.651170566=Group+3:+App+Component,+Document+Component,+Custom+Style,+Custom+Layouts,+Chakra+UI), or the feedback forms for each individual exercise. I would appreciate your feedback a lot.
20 |
21 | ## 🍩 Exercise Feedback form
22 |
23 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+11+-+Use+UI+frameworks+like+Chakra+UI) so you can elaborate on what you learned and give me feedback so I can improve it for future learners.
--------------------------------------------------------------------------------
/final/exercise-11--use-ui-frameworks-like-chakra-ui/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
7 |
9 | )
10 | }
11 |
12 | export default App
13 |
--------------------------------------------------------------------------------
/final/exercise-11--use-ui-frameworks-like-chakra-ui/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { ColorModeScript } from '@chakra-ui/react'
2 | import Document, { Html, Head, Main, NextScript } from 'next/document'
3 |
4 | import theme from '../theme'
5 |
6 | class MyDocument extends Document {
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
14 |
17 | )
18 | }
19 |
20 | export default Home
21 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/src/components/button/button.module.css:
--------------------------------------------------------------------------------
1 | .button {
2 | padding: 10px 12px;
3 | color: white;
4 | border-radius: 6px;
5 | background: #00b5d8;
6 | border: none;
7 | font-size: 16px;
8 | cursor: pointer;
9 | }
10 |
11 | .button:hover {
12 | background: #00a3c4;
13 | }
14 |
15 | .button:active {
16 | background: #0987a0;
17 | }
18 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/src/components/button/button.tsx:
--------------------------------------------------------------------------------
1 | import styles from './button.module.css'
2 |
3 | const Button = () => {
4 | return (
5 |
8 | )
9 | }
10 |
11 | export default Button
12 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/styles/globals.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
3 | 'Arial', sans-serif;
4 | padding: 20px 20px 60px;
5 | max-width: 680px;
6 | margin: 0 auto;
7 | }
8 |
--------------------------------------------------------------------------------
/final/exercise-09--create-custom-style/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/.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 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/final/exercise-10--create-custom-layouts/README.md:
--------------------------------------------------------------------------------
1 | # Exercise 10: Create custom Layouts
2 |
3 | ## Background
4 |
5 | React's composable nature allows us to create reusable components. Layouts are exactly that! In [Exercise 07](../exercise-07--override-the-app-component) we learned what's the `App` component and how to override it. So, if we had a custom layout and wanted to use it, the `App` component is where we should start.
6 |
7 | In Next.js there are two ways that you can define a custom layout:
8 | - [Single Shared Layout](#single-shared-layout)
9 | - [Per-Page Layouts](#per-page-layouts)
10 |
11 | ## Single Shared Layout
12 |
13 | A Single Shared Layout in Next.js is a custom layout that's used by every page in our app. Let's say our app is simple, and every page has a `navbar` and a `footer`. We can define our layout like so:
14 |
15 | ```typescript
16 | // src/components/layout/index.tsx
17 |
18 | import type { ReactNode } from 'react'
19 |
20 | import Navbar from './navbar'
21 | import Footer from './footer'
22 |
23 | type Props = {
24 | children?: ReactNode
25 | }
26 |
27 | const Layout = ({ children }: Props) => {
28 | return (
29 | <>
30 | My App
15 | 16 |-
24 | {lessons.map((lesson) => (...))}
25 |
Loading...
107 | }
108 |
109 | ...
110 | }
111 | ```
112 |
113 | If we don't want to display a Loading page, we can set the `fallback` property in `getStaticPaths` to `'blocking'`. This will make the browser wait for Next.js to pre-render the HTML.
114 |
115 | ## 🚀 Exercise
116 |
117 | Display a page with a list of genres (like in [Exercise 03](../exercise-03--create-dynamic-routes)) and provide the genres using `getStaticProps`.
118 |
119 | ## ⭐️ Challenge
120 |
121 | Make a dynamic "genre" page that will display a sentence explaining the genre.
122 |
123 | ## 🍩 Exercise Feedback form
124 |
125 | Writing down what you learn is key to your retention. Also, I want to make sure each exercise is effective at helping you learn the material. Please quickly fill out [this form](https://docs.google.com/forms/d/e/1FAIpQLSeKPJV5UInaNFlZawN7vZdNyPngyinrkp7eoQO0vzwGzh2EtQ/viewform?usp=pp_url&entry.651170566=Exercise+12+-+Use+the+Static+Generation+method) so you can elaborate on what you learned and give me feedback so I can improve it for future learners.
--------------------------------------------------------------------------------
/final/exercise-12--use-the-static-generation-method/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// -
14 | {genres.map((genre) => (
15 |
-
14 | {genres.map((genre) => (
15 |
-
33 | {users.map(({ id, name }) => (
34 |
-
14 |
- 15 | Sign up to Vercel (it's free, no credit card needed) 16 | 17 |
-
18 | 19 |25 |
20 | Then you'll see the "Import Project" page. Pick the Git provider you host your app's source at. 21 |
22 | 23 |  24 |
26 | -
27 | 28 |32 |
After you've authenticated with your Git provider, you will see a list of your repos. Find the app you want to deploy and click on the "Import" button.
29 | 30 |  31 |
33 | -
34 | 35 |41 |
36 | Vercel will automatically figure out that it's a Next.js project, and it will apply the defaults for you. If you use any Environment Variables, make sure you add them in the "Environments Variables" section. 37 |
38 | 39 |  40 |
42 |
43 | - 44 | When you're ready, hit the "Deploy" button and you app will be built and deployed in a few minutes. 45 | 46 |