Next.js Crash Course 2023 - Build a Modern Blog

Опубликовано: 21 Февраль 2026
на канале: Ebenezer Don

5,057

257

In this Next.js crash course, you'll learn Next.js from scratch by building a blog. You'll learn about SSR and what makes it better than the default React CSR (Client-side-rendering). You'll work with MDX for writing JSX in markdown files, and you'll learn how to use syntax highlighting in your tech blog. We'll cover everything you need to know about Next.js, and you'll be able to share your complete project on https://www.newdev.io when you're done building.

Project assets URL: https://github.com/ebenezerdon/new-ne...
Our hosted Next.js blog URL: https://nextmd.vercel.app/
GitHub repo URL: https://github.com/ebenezerdon/new-ne...

Join this channel to get access to perks, challenges and dev hangouts:
   / @ebenezerdon

All my social Links/WhatsApp: https://newdev.io/ebenezer
Follow me on LinkedIn:   / ebenezerdon
Follow me on Twitter:   / ebenezerdn
Follow me on GitHub: https://github.com/ebenezerdon

****Chapters****

What we’ll be building - 00:00:00
What is Client-side Rendering? - 00:00:25
What are multi-page applications: SSG and SSR - 00:02:06
Next.js Benefits - 00:04:03
What is Markdown, and why we’re using it - 00:04:50
Setting up our Next.js app - 00:07:05
Creating pages in Next.js: the Bio page - 00:10:32
Understanding our Next.js app structure - 00:15:32
The _app.js file - 00:15:32
The .next directory - 00:16:46
The public directory - 00:18:04
The styles directory - 00:19:37
The .eslint.json file - 00:21:00
The package.json file - 00:21:10
The next.config.js file - 00:21:28
Creating our Nav component - 00:24:20
Prefetching and the Next.js Link tag - 00:26:17
MDX file walk-through: Frontmatter and JSX in Markdown- 00:35:14
Creating our Next.js Button component - 00:41:13
Using MDX in our Next.js application: Addling posts - 00:43:17
Creating our Next.js Blog Home page- 00:45:40
The Next.js getStaticProps Method and working with FrontMatter - 00:48:15
Creating dynamic paths in Next.js - the single post page - 01:08:23
Serializing our MDX content- 01:18:08
Using MDXRemote component to render our serialized content - 01:28:25
Conclusion- 01:33:29

#webdevelopment #coding #programming