Projects

In the of this guide, we created a new Next.js project and statically generated a page with some content using a Markdown file. In this part, we will add a navigation bar and a footer to the website. We will also dynamically generate the navigation bar based on the Markdown files in the src/app/_posts folder. We will also convert the Markdown content to HTML and add some styling to the website. We will start by adding a navigation bar to the website. We will use the CSS framework. This is a classless CSS framework, which means that it does not use any class names. Instead, it uses HTML tags and attributes to style the elements. We just scoop the and apply it to our layout To add the navbar, we will edit the app/layout.tsx file so that the navbar is displayed on every page of the website since its the root layout. Note that the href is pointing to /posts. Currently this page does not exist, so we will create it. Remember, in NextJS, the urls of pages are based on the file structure. So, the app/posts/page.tsx page will be available at the /posts url. Now that we have a page to display the posts, we need to populate it with the posts. We will do this by dynamically generating the posts list based on the Markdown files in the src/app/_posts folder. First we will add a getMarkdownFiles function in the lib/mdHandler.ts and then we will dynamically populate the Posts page. Now you can see that the posts page is populated with the list of posts. However, if you click on any of the posts, you will get a 404 error. This is because we have not created the page for the post yet. We want each post to have its own page. So, we will create a src/app/posts/[slug]/page.tsx file. The slug is the name of the Markdown file without the .md extension. The name of the directory is surrounded by square brackets, which means that it is a dynamic route. So, the src/app/posts/[slug]/page.tsx page will be available at the /posts/:slug url. To learn more about dynamic routes, check out the . As you can see, we can retrieve the slug value from the params object. We will use this slug to retrieve the Markdown file and convert it to HTML. In the , we already built a function to get the metadata and content of a Markdown file. We will use that function here to get the content of the Markdown file and then convert it to HTML. You will see the content of the Markdown file displayed on the page. But it's not formated nor parsed as HTML. To do that, we will use the along with , and packages. These packages will allow us to parse the Markdown content to HTML and then convert the HTML to React components. This will also add syntax highlight to the code content. We will add a function in mdHandler.ts to convert the Markdown content to highlighted HTML. Now we can use this function to convert the Markdown content to HTML in the Post page. By updating the file my-md-post.md in the src/app/_posts folder, you will see the changes reflected on the website. Try to add titles, subtitles, code blocks (don't forget to add the language name after the first three backticks), etc. The result will be: NextJS allows us to generate static paths for dynamic routes. This means that we can generate the HTML pages for each post at build time. This will improve the loading time of the website and make navigation quite literally instant. To do this, we will add a generateStaticParams function in the src/app/posts/[slug]/page.tsx file. This function will return the list of paths to be generated at build time, which will be used by NextJS to generate the static pages. We also need to update the posts/page.tsx file to use the NextJS Link component instead of the HTML a tag. This will allow NextJS to pre-load the next pages making it instant to navigate. Now if you build the website using npm run build, you will see in the output that the pages are SSG generated. To learn more about SSG, check out the .

This is the website for Veyxzer. It is built with React and NextJS, and is hosted on Vercel. We use Markdown to write the content of the website. During this post, we will go through the steps to create a small website like the current one you are reading. At the end of this post, you will have a website that looks like this: Before you start with this guide, make sure you have Node.js installed on your system. You can verify the installation by running the following command in your terminal: If Node.js is installed, it should return the version number. You will be asked a few questions about the project. You can answer them as you want, but I recommend to use the following configuration: This will create a new NextJS project in the my-md-blog folder. We can then go into this folder and start the development server: Here we have the default NextJS project. If you go to , you will see the default NextJS page. We will empty the files content of layout.tsx, page.tsx and globals.css that are inside the src/app folder. Next, install sass and PicoCSS using npm. Then, import the PicoCSS stylesheet in the src/styles/theme.scss file: To use PicoCSS, we need to import the stylesheet in the src/app/layout.tsx file: Now run the development server again: You should see the default NextJS page with the PicoCSS styles applied. If you add a <button> element in the src/app/page.tsx file, you will see that the button is styled with PicoCSS. During the following steps, we will create a Markdown file and display it on the website. To do so we need to create the .md file, populate it with a header (to add metadata) and some content, and then parse it to HTML. We will also add syntax highlighting to the code blocks so that its more readable. Create a new file in the src/app/_posts folder and name it my-md-post.md. This file will contain the content of the blog post. We will add some metadata to the Markdown file. This metadata will be used to display the title, description, and date of the blog post. The gray-matter package will be used to parse the metadata. Before we jump into parsing our markdown files, let's take a brief moment to understand what gray-matter is and why we need it. gray-matter is a library that helps us parse front-matter from a string or file. Front-matter allows us to keep metadata attached to an instance of a piece of content, saved at the beginning of the file and it uses YAML or JSON syntax. In our case, it allows us to keep important information about our blog post (like the title, author, date, and tags) in an easy-to-read and easy-to-access manner. Once we've extracted this information, we can use it to render our blog post with all the details our users want to know. Inside the file src/app/_posts/my-md-post.md, we will add the following metadata at the top: We will add some content to the Markdown file. This content will be displayed on the website. We will use the gray-matter package to parse the Markdown file and extract the metadata and content. We add a new file src/lib/mdHandler.ts that will contain the code to parse the Markdown file. First, we will create a function that will read the Markdown file and return the metadata and content. Then, we need to code parseMarkdownFile that will parse the Markdown file and return the metadata and content. Finally, we need to add a function that will parse the Markdown content to HTML. We will use this code in the src/app/page.tsx file to display the content of the Markdown file. You should now see the content of the Markdown file displayed on the website. The content is not styled yet because we only extract the content of the Markdown file without transforming it to HTML. The title is styled because we use the data.title property of the Markdown metadata. Excited about what you've learned and eager to know more? Here are some resources you might find useful: Stay tuned for the where we'll add syntax highlighting to our code blocks and improve the website navigation. We will also load the Markdown files dynamically and display them as a list on a dedicated page