Build A Blog From Markdown Files In Next.js

[Music] in this video you will learn how to create a simple blog app using next.js where the posts are created by markdown files so all we need to do is create a new markdown file and fill it out with what we want to say in our blog post and then everything from the url to the full blog post to its listing on the home page will be generated automatically for us obviously this example blog that you're currently seeing isn't a professional app i just threw it together very quickly to demonstrate the core principles that you need to know for this tutorial and once you've got them down you can move on to styling your own blog in however way that you want so here we are in a new nexus project i've not made any modifications to this and i've literally just run the create next app command for seo purposes we will create this header component in the components folder which you just created and i'm using react code snippets to create functional components really quickly and then we'll import the head component from next js because that's what this functional component will return and inside we'll just write the metadata that we want now we will delete the dummy content in the home page and make this header be the first thing to be rendered out on this page along with this h1 and obviously we imported this so that we could use it next we will open up our terminal and we will install the following dependencies they all make it possible for us to work with markdown files react markdown the first dependency is for parsing and rendering the markdown files and gray matter will pass the front matter of our blogs which is the top part of the markdown file in between three consecutive high funds but you'll see more about that later on but we're not done with the configuration yet though we should now create this file called next.config.js in our root directory and the following should go inside again i'll post a link to the project's completed github page in the description box below so you can just copy it from there now that we are all set up to read and pass our markdown files we will create this content folder on our route and it will hold all of our markdown files i will now fast forward the process of me filling out these three markdown files now i won't focus on the actual content of these markdown files too much because they all follow the same format and these blog posts are just snippets copied from other people's blogs and i won't explain the formatting either because the markdown syntax is very easy to learn and there are other videos out there if you want to learn it but what i will focus on is the front metadata which as promised is sandwiched between a pair of three hyphons one here one there the front metadata works like a javascript object in the sense that it is comprised of key value pairs this means that the data here is separated from each other allowing us to reach it and extract the individual pieces of data as for the data that we are currently storing here it is all necessary information that our project requires to work properly the slug field is probably the most important one its value should match the file name of the markup file verbatim just about the file extension at the end so currently we're in best web dev technologies and you know the slug matches that name and later on you'll be using this value to create a url that will point the associated markdown file as the given url but more on that later though now back on our index page we will begin reading and passing the content to these markdown files we will create this function to eventually pass in the data these markdown files into this index page component up here but we will need to read them first obviously the file streamer dependency will allow us to do just that it comes pre-installed in xjs so there's no need for us to install it all we need to do is require it like so once required we will use this read done method to read all of the file names in this content directory where we are holding all of the markdown files and just to make things clear we are reading the file names not the actual files themselves and this process.cwd method will always point to the root directory of the project that we are currently working within this is why we can just append the contents file onto the end of it to access the content directory which is a folder directly in the root directory we do this because we want to make sure that we are only going to read the markdown files contained in this directory and we do that with this filter method and obviously at the moment we only have markdown files in the directory but that doesn't mean that this will always be the case therefore we need to make this check to ensure that there are no errors further along down the line so we will loop through this list of file names using the map method and inside we will return the past content of the markdown file that is relevant to the file name that we are currently looping through and that will be assigned to blog we do that by first creating the path to the markdown file that we currently have the name of then we use file streamer to pass the content of this file and finally we return the contents this past file and this will construct an array of the past contents of all the markdown files that we have because when you return something with the map method that stomach will be an individual item in the array that is eventually returned with the map method finally we will make this array of pass markdown files a property of the index page component by returning the data as a key value pair on the props object now that we have access to this data and index page component we can begin to use the gray matter dependency on every piece of markdown data that we have in the array to be able to work with the front metadata as key value pairs the reason why we didn't do this before is because the end result of using gray matter on a markdown file is its data type is unsuitable for being returned with the get static props function therefore you'll only use gray matter on the files once the data has been returned by the function and it's been passed into this home index page component as a property so we'll just add the props arguments that we can actually access it and we'll also need to input gray matter so we will leap through the array of markdown data and return the past result of using the mata function on each markdown file to construct a new array of markdown files that we can extract front mata from and that will be in real data now the actual front metadata for each markdown file is stored in the data property which holds a javascript object in and of itself to separate the key value pairs in the front matter we will therefore extract this data into a new array list items and in the return statement we will loop through the survey so that we can list out all of the blogs on the home page that's eventually users will be able to click on an individual blog post to go to read the blog in full we want each blog post to be its own components that we can extract our application out of it inside we'll import the link component from next.js we will use it to direct the user to the blogs for page this component will be given a property of blog it will be the past data from an individual markdown file so what we are doing here is we are rendering out some of the information from a markdown's front matter section into jsx so that users will be able to see the information on the screen as for the class names you won't really be focusing on that too much because this isn't a styling tutorial as it's up to you to customize your blog on your own next you will use the link dependency to direct the user to a page where they'll be able to see the blog post in full when they click on the blog post title obviously at the moment this will not work because we have not created that page yet and when we do it needs to be in the post folder because as you can see the link is directing to that post route and then we will finish with a description of the blog post again this information is coming from the front matter section with this created we can go back to our index page and import it from there and this key property doesn't actually do anything we have set it to be equal to the current index of the loop because that is a unique piece of information and react requires a unique piece of information to be passed into every parent component's key property when it is being rendered out by a loop then we will render out a blog post component for each markdown file stored in the array passing in the markdown property to this component be its blog property like we said we would and this key property doesn't actually do anything we have set it to be equal to the current index of the loop because that is a unique piece of information and react requires a unique piece of information to be passed into every parent components key property when it is being rendered out by a loop i will now start the development server so we can see what we've done and as you can see we have got stuff on the screen and it's relevant to our markdown files but obviously it's not styled yet now i'll be using sas to style this block because it makes nesting easier a very important characteristic where we want to encapsulate certain stylings to specific components like how we do in react again i won't be going over how sass works or how you should be starting this project it's up to you to figure out those things out on your own if you don't know already the purpose of this tutorial is to teach you how to work with markdown files in xjs not how to start a website and with the sas file compiled we will acquire it in this underscore app.js file so that it will be rendered on every single page and so now if you go back as you could see it styled how it was at the start one thing that i will point out is that these blogs are not rendered out in any particular order but in the opening demonstration they were ordered by the creation date from the front matter now you won't actually be ordering the blog post in this tutorial for the sake of time but it isn't hard to do and if you really get stuck then i'll post a link to the completed projects github page in the description box below so you can go there to see how i did it so what we now need to do is create the page that will display the blog post in its entirety because at the moment clicking on one of these links will just take us to an error page and that's because we haven't created the page yet so you'll create the post file because remember that was part of the url that we sent the users to and as for the file itself its name will be within square brackets because we want to direct the user to this file regardless of what comes after slash pose in the url the data that comes after here will be treated as a query parameter by us with the name of blog hence a name in the square bracket inside we will import the header component because this is a new page now along with react markdown because we'll be displaying the content in the markdown's body in this file and not just information from the front matter and gray matter because we'll be displaying some of that data as well and let's not forget to create the actual functional component so that this page actually renders something and we'll just call it blog post instead because obviously that returns an hour and now it will create this get server-side props function because it is called on every request to the page meaning that the content displayed will always be relevant to the blog post that the client just clicked on and because it gives us access to this context argument which we can extract the query parameter firm and so you will extract this query parameter along with importing file stream again then we will read the contents of the markdown file that was identified by the file name that was given to this root in the form of a query parameter under the name of block and this data member came from the slug property on each of our markdown files front matter sections which was then given to the redirect of the link component that sends the user to this file so that now inside of this file we can access that query parameter from the url and use it to locate and then pass the markdown file with the same name as the query parameter in the relevant directory and this data will be given to our blog page as a property once inside we'll pass this data with gray matter so that we can get access to its font metadata as the before data will contain the front metadata but now we are extracting content as well and that will be the rest of the markdown data aside from the front matter section and like with before we will end about the relevant data from the front matter section but underneath you'll render out the content from the body of the relevant markdown file and to do that we will use the reactor markdown component that we just imported it will taken the markdown data in content and convert it into jsx and this will be rendered to the screen just like everything else and so now if you go back hopefully you won't get an error error anymore and yeah as you can see it actually is displayed i mean we're gonna have to style this a bit because this image isn't right so we'll just start it now real quick so here's the styling again won't go into that in much detail but now make sure that it's updated as you can see everything's working as it should again these aren't ordered actually wait they are that's just by coincidence but of the way that we've created the markdown files but if we created them in a different way then they actually wouldn't be in the correct order based on their date the dates given here not the actual creation date and in the github project you will find that it's actually ordered by the creation dates here and you can find out if you go and github if you click on the link but anyway that's the end of the video now you could find out that stuff for yourself i hope you enjoyed this video i hope you benefited from it and if you have any suggestions for improvement then i would appreciate it if you post it in the comments box below so that you could help me improve and also if you have any queries then i'll answer them to best of my ability in the description but anyway i hope you enjoyed this video i hope you learned something from it and peace out have a great day

Channel: Qixotl LFC

Views: 3,300

Keywords: Qixotl, LFC, markdown with nextjs, how to use markdown files in nextjs, nextjs with markdown, markdown nextjs, how to build a blog from markdown files in nextjs, build a blog with markdown files in nextjs, nextjs blog from markdown files, how to read a markdown file in nextjs, nextjs markdown tutorial, nextjs blog tutorial, how to parse markdown data in nextjs, work with markdown in nextjs, nextjs read markdown files, nextjs .md, markdown in nextjs tutorial, nextjs markdown blog

Id: McLta2eHej0

Length: 15min 19sec (919 seconds)

Published: Sun Jun 20 2021