gitdagray / next-js-course

"Next.js 13 for Beginners"

Full Course - 12 Chapters

---

Author Links

👋 Hello, I'm Dave Gray.

👉 My Courses

✅ Check out my YouTube Channel with hundreds of tutorials.

🚩 Subscribe to my channel

☕ Buy Me A Coffee

🚀 Follow Me:

• Twitter
• LinkedIn
• Blog
• Reddit

---

Description

📺 YouTube Playlist for this repository.

🚀 This repository shares ALL of the resources referenced during the Next.js for Beginners tutorial series.

📚 Recommended Prerequisites

• 🔗 HTML for Beginners
• 🔗 CSS for Beginners
• 🔗 JavaScript for Beginners
• 🔗 React for Beginners
• 🔗 TypeScript for Beginners
• 🔗 Tailwind CSS for Beginners

---

🎓 Academic Honesty

DO NOT COPY FOR AN ASSIGNMENT - Avoid plagiarism and adhere to the spirit of this Academic Honesty Policy.

---

⚙ Free Web Dev Tools

• 🔗 Google Chrome Web Browser
• 🔗 Visual Studio Code (aka VS Code)
• 🔗 Node.js & NPM
• 🔗 {JSON} Placeholder
• 🔗 ES7 React Snippets

📚 References

• 🔗 Next.js Official Site
• 🔗 Next.js 13 Docs
• 🔗 Cloudflare: How does a CDN work?
• 🔗 What is MDX?
• 🔗 next-mdx-remote RSC Docs

🚀 Early Project Dependencies

• 🔗 react-icons
• 🔗 gray-matter
• 🔗 remark
• 🔗 remark-html
• 🔗 limiter

🚀 Final Project Dependencies

• 🔗 react-icons
• 🔗 next-mdx-remote
• 🔗 highlight.js
• 🔗 rehype-highlight
• 🔗 rehype-slug
• 🔗 rehype-autolink-headings
• 🔗 sharp
• 🔗 next-sitemap

---

💻 Source Code

• 🔗 Chapter 1 - Introduction & Setup
• 🔗 Chapter 2 - Pages & Layout
• 🔗 Chapter 3 - Data Fetching, Dynamic Routes & Metadata
• 🔗 Chapter 4 - SSG, SSR, & ISR
• 🔗 Chapter 5 - Client Components & Small Project
• 🔗 Chapter 6 - Blog Website Project
• 🔗 Chapter 7 - Route Handlers for API Routes
• 🔗 Chapter 8 - Build a REST API
• 🔗 Chapter 9 - Middleware
• 🔗 Chapter 10 - Background & On-Demand Revalidation
• 🔗 Chapter 11 - Mutating Data
• 🔗 Chapter 12 - Build and Deploy a Blog with Remote MDX Content

next-js-course's Issues

Next12 update getPostsMeta and getPostsbyName due to unexpected behavior.

Remove the Github api version as it seems it is deprecated and was giving unexpected results. Too lazy to make a pr. Here is the correct fetch calls.

export async function getPostsMeta(): Promise<Meta[] | undefined> {
  const blogPosts = await fetch(
    "https://api.github.com/repos/${user}/blogs/git/trees/main?recursive=1",
    {
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
      },
    }
  );

export async function getPostByName(
  fileName: string
): Promise<BlogPost | undefined> {
  const post = await fetch(
    `https://raw.githubusercontent.com/${user}/blogs/main/${fileName}`,
    {
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
      },
    }
  );

next-js-course/next-05/app/[searchTerm]

my code is not working how ever i copy the same code but whenever I request to the api the data is not coming

Next06 Post details not showing

when clicking on a post link, it opens a 404 not found page. This is the error: Could not load content for webpack://react-devtools-extensions/react-devtools-shared/src/backend/console.js (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

Infinite loop of "Fast Refresh had to perform full reload"

Hi @gitdagray ,

Thanks for a great course, I've learned so much from you. I've found myself able to go through your course – I'm up to next07 – but it seems I'm often running into this aforementioned infinite loop of Fast Refresh had to perform full reload. I don't understand what's causing it.

But certainly now my machine seems to have this behaviour where even after a reboot & fresh clone:

┌─────────────────────────────────────────────────────────── 2023-06-03 20:18:11
│ DW-Mac derek ~
│
└ ❯ cd /tmp

┌─────────────────────────────────────────────────────────── 2023-06-03 20:18:15
│ DW-Mac derek /tmp
│
└ ❯ git clone https://github.com/gitdagray/next-js-course.git
Cloning into 'next-js-course'...
cd neremote: Enumerating objects: 338, done.
remote: Counting objects: 100% (338/338), done.
remote: Compressing objects: 100% (260/260), done.
remote: Total 338 (delta 142), reused 240 (delta 44), pack-reused 0
Receiving objects: 100% (338/338), 867.77 KiB | 5.23 MiB/s, done.
Resolving deltas: 100% (142/142), done.

┌─────────────────────────────────────────────────────────── 2023-06-03 20:18:38
│ DW-Mac derek /tmp
│
└ ❯ cd next-js-course

┌─────────────────────────────────────────────────────────── 2023-06-03 20:18:39
│ DW-Mac derek .../next-js-course  main
│
└ ❯ cd next01

┌─────────────────────────────────────────────────────────── 2023-06-03 20:18:42
│ DW-Mac derek .../next-js-course/next01  main
│
└ ❯ la
Permissions Size User  Group Date Modified    Git Name
drwxr-xr-x@    - derek wheel 2023-06-03 20:18  -- app/
drwxr-xr-x@    - derek wheel 2023-06-03 20:18  -- pages/
drwxr-xr-x@    - derek wheel 2023-06-03 20:18  -- public/
.rw-r--r--@   40 derek wheel 2023-06-03 20:18  -- .eslintrc.json
.rw-r--r--@  393 derek wheel 2023-06-03 20:18  -- .gitignore
.rw-r--r--@  134 derek wheel 2023-06-03 20:18  -- next.config.js
.rw-r--r--@ 219k derek wheel 2023-06-03 20:18  -- package-lock.json
.rw-r--r--@  492 derek wheel 2023-06-03 20:18  -- package.json
.rw-r--r--@ 1.7k derek wheel 2023-06-03 20:18  -- README.md
.rw-r--r--@  658 derek wheel 2023-06-03 20:18  -- tsconfig.json

┌─────────────────────────────────────────────────────────── 2023-06-03 20:25:10
│ DW-Mac derek .../next-js-course/next01  main ?
│
└ ❯ npm i && npm run dev

added 270 packages, and audited 271 packages in 2s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
info  - VS Code settings.json has been updated for Next.js' automatic app types, this file can be added to .gitignore if desired
event - compiled client and server successfully in 887 ms (246 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 44 ms (247 modules)
wait  - compiling /page (client and server)...
Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.
    at nextFontError (/private/tmp/next-js-course/next01/node_modules/@next/font/dist/utils.js:55:17)
    at downloadGoogleFonts (/private/tmp/next-js-course/next01/node_modules/@next/font/dist/google/loader.js:87:39)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /private/tmp/next-js-course/next01/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:52:93
    at async Span.traceAsyncFn (/private/tmp/next-js-course/next01/node_modules/next/dist/trace/trace.js:79:20)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
event - compiled client and server successfully in 76s (528 modules)
wait  - compiling...
event - compiled successfully in 0 ms (310 modules)
event - compiled successfully (300 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
...

Any idea what might be causing this, or how to debug? The NextJS link doesn't seem helpful.

03 Page Not Found

I am getting This page could not be found
Same code

next06/lib/post.tsx remark-html type error

For those who are following through the course, You might encounter this issue in lesson 6

This is probably due to a typing issue caused by the latest version of remark-html. I was able to fix mine by downgrading to v14.0.0

Refer to this link below for additional info:

vercel/next.js#52369

next04/app/users/[userId]/page.tsx

if you're doing this on the latest nextjs version, you'll probably run into a problem when using user to flag a notFound, in this case instead of
if(!user.name)
do
if(!user?.name)

next11 todo fetch not working: cannot read properties of undefined

next11 src/app/components/TodoList.tsx

getting an error that todos is possibly undefined.