Build A Blog From Markdown Files In Next.js 

In this video, you will learn how to create a blog in Next.js, where content is generated through markdown files. This means that with some preliminary Next.js work, which we will spend a good deal of time focusing on; we will be able to create a new markdown file that contains the content and images that we want our new blog post to have, and then just from the creation of this markdown file, a new blog post will be listed on the homepage of our website and clicking on it will lead us to a page where we can read that specific blog post in full.
To create a project like this, we will first need to find a way to read and parse markdown files, because Next.js does not give us a way of doing this out of the box. After, we will need to set up dynamic routing so that a unique URL is automatically generated for each new blog post. So that, all we need to do on our end, is create a single blog page component that is set-up to render out a blog from the data stored in a given markdown file. And with this, we will set all of our dynamic URL’s to go to this page component, which is configured to extract the unique part of the dynamic URL, the query parameter, and use this information to render out a specific markdown file that corresponds to the blog-post that the user just clicked on.
📚 Materials/References:
- Completed project’s GitHub repository: github.com/lukechopper/nextjs...
🧠 Concepts Covered:
- Handling markdown files in Next.js
- Dynamic routing with markdown files in Next.js
- Reading filenames with file streamer.
💻 Technologies used:
- Next.js
- SASS
- NPM dependencies for reading, parsing and rendering out data from markdown files.
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog
No Copyright Music. Video Link: • Ehrling - You And Me (...
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. ❤️
#nextjs#react#javascript#webdev#blog#markdown#cs#computerscience

Наука