Build a Blog With Next.JS & TailwindCSS [Arabic] [English Subtitles] - كيفية بناء مدونة

Aug 15, 2023

Build a Blog With Next.JS & TailwindCSS [Arabic] [English Subtitles] - كيفية بناء مدونة

[English Subtitles Available]

This video is part of the Build Your Own X series, which is a series of quick videos showcasing how to build certain projects on your own. It follows a step-by-step approach with minimal setup and simple explanation.

Next.js gives you the best developer experience with all the features you need for production: hybrid static \u0026 server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Chapters:
00:00 Intro \u0026 Final Result
00:20 Problem Description
00:50 Next.JS Introduction
01:10 TailwindCSS Introduction
01:30 Setup
04:20 Data Fetching
05:15 Building Our Data Fetching API
06:30 Creating A Template Page
05:50 Next.JS File-System Based Routing \u0026 Dynamic Routes
08:00 Incremental Static Regeneration
09:10 Enabling TailwindCSS
10:30 Creating An Index Page
12:20 Building \u0026 Exporting
12:40 Wrapping Up

Source Code:
https://github.com/KL13NT/build-your-…

Sources:
NextJS Documentation https://nextjs.org
TailwindCSS Documentation https://Tailwindcss.com
NextJS Incremental Static Regeneration https://nextjs.org/blog/next-9-5#stab…
NextJS Data Fetching https://nextjs.org/docs/basic-feature…
NextJS Built-In CSS Support https://nextjs.org/docs/basic-feature…
Deploying on Vercel https://nextjs.org/docs/deployment
Deploying on any static provider https://nextjs.org/docs/advanced-feat…
Google Developers on the difference between Static Site Generation and Server Side Rendering https://developers.google.com/web/upd…
Vercel on NextJS Server-side Rendering vs. Static Generation https://vercel.com/blog/nextjs-server…
Export warning https://github.com/vercel/next.js/blo…

Website: https://iamnabil.netlify.app
Facebook: https://www.facebook.com/twiapos
Twitter: https://twitter.com/Nabil_Tharwat16
Discord: https://discord.gg/xrGAnTg

#nextjs #tailwindcss #blog

Content

0 -> Hello everyone, my name's Nabil Tharwat and today we're building a personal blog using NextJS and TailwindCSS!

5.309 -> By the end of this video we'll have created a simple blog with an index page that lists all our blog posts

14.179 -> You'll also be able to deploy the code to any hosting service such as Netlify and Vercel.

22.035 -> Websites built using JavaScript frameworks such as React and Vue are heavy on older devices

28.214 -> And users may be unable to view them if they have disabled JavaScript

34.218 -> Search Engine Crawlers may be unable to view or crawl your websites as well, leading to bad SEO

39.371 -> and low search results on websites like Google and Yahoo.

46.854 -> NextJS is a web framework for React that solves this problem.

51.655 -> Using Static Site Generation and Server Side Rendering, NextJS allows us to build with better SEO and indexability

62.128 -> independent of JavaScript at least for the initial page load.

68.294 -> Tailwind is a CSS framework built with a different mindset.

73.635 -> Instead of using traditional components like Button, Form, and Form Group

78.889 -> Tailwind allows us to combine utility classes to come up with the look we want.

82.241 -> Things like margins, paddings, etc.

90.188 -> The first step is to run `yarn create next-app` or `npx create-next-app`

97.087 -> Then go into the created directory and run `yarn dev` or `npm run dev`

99.782 -> This will start the development server on port 3000 by default

105.591 -> Navigating to localhost:3000 we'll land on this simple page

110.129 -> We've now made sure Next is up and running

112.113 -> We can now install the required packages

115.292 -> tailwindcss, postcss, and autoprefixer

119.905 -> And the packages that will handle parsing and rendering our markdown: gray-matter and react-markdown

129.015 -> We'll now open up the project's folder in our favourite editor. I'm using VSCode, but you can use anything you like.

136.892 -> Looking at the folder structure we'll notice the following:

141.148 -> `Pages` contains all of our pages and routes

146.997 -> The `api` folder within `Pages` should contain all the handlers we need to build a full API.

156.328 -> Each file represents an endpoint just like how each file in Pages represents a route.

160.837 -> We won't need it for this video.

166.504 -> `Public` contains all the static assets that will be copied to the output bundle.

171.482 -> And the last one, `Styles`.

174.481 -> NextJS supports both global styling

178.862 -> and CSSModules.

184.15 -> We'll now configure PostCSS to use Tailwind and Autoprefixer

194.755 -> We'll also need to configure Tailwind to purge the components and pages directories

205.311 -> The purge option makes sure that the output CSS bundle is as minimal as possible by removing unused classes

218.174 -> We'll then add the default config for Tailwind just in case

221.567 -> We'll now create a directory off the base directory called `blog` to store all our blog posts

227.809 -> Let's also create a sample blog post `hello.md` with random data to have something to test

240 -> We'll also add some frontmatter

242.632 -> Frontmatter is metadata stored about the current file and takes the format of YAML

247.556 -> Here, I've specified a title and date.

250.755 -> NextJS provides an easy-to-use data fetching API that allows us to generate

259.633 -> content based on API requests or file-system files

263.846 -> It provides 3 main functions, getStaticProps, getStaticPaths, and getServerSideProps

273.84 -> getServerSideProps is used in (you guessed it) server side rendering, and won't be needed today

284.32 -> getStaticProps provides props to the page component in the same file it's exported from

294.369 -> Returning an object with key `props` from this function will force Next to redirect the `props` key into the page component

305 -> Before we start using getStaticProps, we need to build the utility functions we'll use to read and parse our blog posts

316.051 -> We'll start by importing the methods we need from `fs` and `path`, as well as gray matter

323.429 -> and specify the location of our posts.

326.209 -> We'll declare `getAllSlugs` which will return an array of `slug`s after removing the file extension.

334.21 -> We'll then declare `getPostBySlug` which will take a slug and read the contents of that post as simple text

341.126 -> then use gray matter to parse the file.

344.453 -> This will produce an object with two keys, data which is our frontmatter, and content as markdown text.

353.534 -> Next uses file-system based routing,

356.129 -> meaning that the structure of `Pages` will be the exact structure of our deployed website.

363.794 -> It also supports dynamic routes, which allow us to re-use the same page component multiple times.

369.278 -> So if we navigate to `/blog/hello` we'll be greeted by our `hello.md` post.

375.19 -> This will happen after we configure Next to do that, of course.

379.35 -> So let's create the structure we just saw, a blog path with a [slug] inside of it

388.832 -> The [slug] will act as a dynamic route for all our blog posts

394.036 -> Let's import react-markdown to render our markdown,

398.922 -> and the API functions we created in api.js

403.114 -> getStaticPaths is a function that allows us to define a set of routes for our dynamic routes

411.504 -> Next uses the `paths` key in the returned object for this

415.84 -> Each object in `paths` is called a `context`

419.622 -> and Next executes the page's getStaticProps once for each `context`

426.058 -> Looking at the structure of the returned object

430.652 -> We'll find that each object consists of `params` and that `params` contains

433.434 -> the path values we wish to pass to our getStaticProps

435.434 -> In this case we have 1 parameter which is the slug value, hello, and hello2

439.854 -> Each of those objects in `paths` will be called a `context`

443.454 -> Next will execute getStaticProps once for each of those

447.396 -> Meaning that in this component the exported getStaticProps will be called twice,

454.05 -> once for the context containing `hello`, and another for `hello2`

459.106 -> Let's build getStaticPaths now

461.767 -> It'll execute getAllSlugs and map the array of slugs to an array of `context`s

471.43 -> We'll then define getStaticProps

474.779 -> We'll destructure the parameter context to gain easy access to our slug

476.986 -> then execute getPostBySlug

480.13 -> and then return the post as props for our component

485.294 -> I haven't yet talked about the fallback option

489.31 -> This option, simply put, controls whether this page supports incremental SSG

494.597 -> If this option is set to true and the page the user is trying to visit has not been statically generated

501.117 -> Next will display a fallback page and request the page to be SSG in the background

506.279 -> This is known us incremental static site generation

508.344 -> Which is to generate static pages at runtime on-demand

513.636 -> This option doesn't play well with Next `export ` and won't work for us, we don't need it anyway

520.622 -> You'll find more information about the topic in the sources for this video

528.87 -> We'll now build our blog post template

530.806 -> First we'll destructure the props,

533.501 -> then build some basic markup,

535.346 -> finally add react-markdown and pass in the markdown 'html'

538.747 -> react-markdown's job is to transform the simple markdown into an HTML tree

546.201 -> If we open up the terminal and execute `npm run dev` and navigate to `/blog/hello` we'll land on our parsed `hello.md`

552.257 -> but we'll notice that it's not styled, despite setting up and using Tailwind's classes in our component

560.484 -> This is because we haven't instructed PostCSS to import Tailwind's css into our code

567.345 -> To fix this, we'll go to our `globals.css` and add these 3 lines to the top

577.395 -> Tailwind `base` includes reset and normalization code and set useful defaults

585 -> Now if we save and check the browser we'll notice that Next is reloading the page

593.082 -> When it's done all the tailwind classes we used will take effect

598.131 -> We now conclude that everything is setup correctly

603.166 -> But we're missing a homepage!

609.456 -> As a visitor, to get to your blog posts I won't memorize some links, but rather need a reference for them, a homepage!

617.079 -> Either a link, or a list of links, to go to each post

624.445 -> For this, we'll modify the default Next index.js

629.404 -> Before we do that though, we'll need to define a function that will return an array of post objects sorted by date

637.649 -> By calling getAllSlugs and mapping each slug to a post using getPostBySlug, then sorting by date, descending

643.568 -> Then go back to our index.js and clear it

648.237 -> Now let's import the Head and Link components

650.806 -> Then we'll import getAllPosts and build getStaticProps for this page

654.746 -> getStaticProps this time will return the array of posts returned by getAllPosts

662.292 -> We'll then start building our page component by destructuring the props

670.26 -> Modify the page's using `next/head` to set a custom title

676.391 -> Then we'll add a that we'll map the posts to 's inside of

684.981 -> Using array.map we'll transform each post to an that consists of a link to the blog post and the date

694.336 -> Then we'll add some simple styling using tailwind utilities

703.327 -> And navigate to `/`

705.749 -> We'll be greeted by a list of the blog posts available right now

710.133 -> Each post has a title as a link, and the date

714.389 -> Clicking the link will take me to the post we clicked

722.543 -> Now everything is setup perfectly, and we can add new posts by simply creating new files in our `blog` directory

729.257 -> I'll add a new post and name the file `hello2`

734.145 -> Now this new post should show up on the index page

738.688 -> And clicking its link will take us to the post itself, as well

742.906 -> To export our blog to simple HTML and CSS to deploy on any static hosting provider,

749.048 -> we'll need to execute these two commands.

753.704 -> Export will export all the files we need from the `.next` directory to an `out` directory

757.469 -> (This disables fallback option on all pages and that's why we set it to false.)

761.682 -> Next will give us a warning about this informing us that anything resembling an API (e.g. the `Pages/api` folder) will not work.

771.827 -> We can suppress this warning by deleting the /api folder in /pages, and is generally nothing to worry about

776.113 -> I'll wrap up here, if you liked this video make sure to like, share, and subscribe

782.874 -> and leave me a comment on the video!

784.874 -> Thanks for watching and I'll see you in the next one

Source: https://www.youtube.com/watch?v=ZpXTvP7QVFY