Librarium
Settings

Next.js Crash Course - Build a Blog With MDX Tutorial // For Beginners

Ebenezer Don
mdx blogmdx nextjsnext jsnext js authenticationnext js in 100snext js mdx cmsnext js mdx front matternext js mdx layoutnext js mdx tutorialnext js projectnext js project from scratchnext js project tutorialnext js tailwindnext js tutorialnext js typescript projectnext js vs reactnext js websitenext markdownnextjs blognextjs mdxnextjs mdx blognextjs mdx tutorialsource mdx content nextjsuse mdx in nextjs

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 technical 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-next-mdx-assets Our hosted Next.js blog URL: https://nextmd.vercel.app/ GitHub repo URL: https://github.com/ebenezerdon/new-nextjs-mdx-blog

Join this channel to get access to perks, challenges and dev hangouts: https://www.youtube.com/channel/UCstfxdhJ1CFLs9Db1kFyb1g/join

All my social Links/WhatsApp: https://newdev.io/ebenezer Follow me on LinkedIn: https://linkedin.com/in/ebenezerdon Follow me on Twitter: https://twitter.com/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 ... https://www.youtube.com/watch?v=AOQ80BaV_NQ

2022-09-28
0.0 LBC
Copyrighted (contact publisher)

300408270 Bytes