DEV Community: Telmo Goncalves

NextJS + TailwindCSS Boilerplate

Telmo Goncalves — Fri, 05 Feb 2021 12:52:36 +0000

So I've decided to redesign my website, from now on I'll be trying to focus my content more around small tutorials and not so much the usual rants I like to throw here. This website / blog was pretty much built using NextJS, TailwindCSS and MDX.

Once I was done with it, I thought maybe someone can also benefic from a tutorial on how I've done it.

I might cover the MDX part eventually, but for now I don't feel 100% comfortable sharing a post on that.

Lets dive in!

NextJS

Although the good folks at Vercel created the npx create-next-app command, I usually like to start my apps as clean as possible, so in this tutorial we're actually starting with a clean / empty folder.

Let us create a folder for our project:

take nextjs-tailwind

Now that we have our folder we can init our node project, for that we can run:

npm init -y

If you're wondering what take does. Aside from creating a folder it also navigates inside it right away. Also, the -y to init our node project is to skip the questions this commands asks and set default values for us.

Go ahead and install the required packages to have our own NextJS application:

npm i react react-dom next

Awesome, now we'll do 2 things, first we'll change the scripts on our package.json file and then we'll create our first NextJS page.

Open our project in your favorite text editor, I keep switching between VSCode and Sublime Text, but for this one I'm actually using VSCode. Run:

code .

What code . does is to open the current directory with VSCode, handy nice shortcut.

Open package.json and change the scripts object with:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Now create our first page:

take pages && touch index.js

Navigate to pages/index.js, you should find an empty file, let us take care of that and create our first page, we'll call it Homepage:

function Homepage() {
  return <>Welcome to our homepage!</>
}

export default Homepage

Awesome! Guess we can go ahead and run npm run dev, we should be able to see Welcome to our homepage! when accessing http://localhost:3000.

For now we have all we need regarding NextJS. Let us move to Tailwind.

TailwindCSS

Alright, we'll need to install 3 packages to get Tailwind working on our project:

npm install tailwindcss postcss autoprefixer

Configuration files

By running this command it'll create both tailwind.config.js and postcss.config.js:

npx tailwindcss init -p

You can learn more about configuring Tailwind in the
configuration documentation.

Configure Tailwind to remove unused styles in production

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.js', './components/**/*.js'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Good progress. Now we'll need to include Tailwind styles in our application. First we'll need to create an _app.js file inside our pages folder:

touch pages/_app.js

Inside it we'll put the default content that NextJS required:

import '../styles/base.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

This will throw an error because we still don't have our base.css file created, let us take care of that.

Styling

First, create a base.css file inside a brand new styles folder:

take styles && touch base.css

Now we can finally include Tailwind:

/* styles/base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Restart your server and make sure everything is being loaded properly.

Now let us go into our pages/index.js file and apply some Tailwind handy classes to style a little bit our title:

function Homepage() {
  return (
    <div className="text-center my-12 font-black text-4xl">
      Welcome to our homepage!
    </div>
  )
}

export default Homepage

If you check our pages you'll notice that our title looks much better now, this is the beauty of Tailwind, with only classes we can achieve so much and be as original as we want.

The more you use Tailwind the easier it gets to remember what classes you should use to achieve what you want. When I started using it I kept checking their documentation to double check some classes, and I still do, not so often though.

So, make sure to check their documentation.

Random colour with JavaScript

Telmo Goncalves — Sun, 15 Mar 2020 08:34:44 +0000

I've Tweet this a few days ago and it got a little attention from the community.

While you're here you might want to follow me on Twitter

Liquid error: internal

The main reason for writing this post is to explain why to use 16777215, looks kind of a random number and can be a little misleading.

Why 16777215?

If you're familiar with RGB (Red, Green, Blue), you know it's represented by a number from 0 to 255, an example of a colour using RGB would look like:

/* Same as #ffffff */
color: rgb(255, 255, 255);

Now, if we do 256 * 256 * 256 we end up with 16,777,216, now why do we remove 1 from this value?

We want to convert into a hexadecimal format and 16777216 converts to 1000000, while 16777215 converts to ffffff.

I did a little research but mainly this came from here, thanks Jacob:

Jacob Paris 🇨🇦

@jacobmparis

@ajaykarwal @telmo Red, green, and Blue are each represented by a number from 0 to 255

256 * 256 * 256 = 16777216

02:57 AM - 15 Mar 2020

There are other explanations, based directly on the hexadecimal code, but I felt this one made more sense and it was simpler.

Happy to discuss this further and give me a shout if you think something's not right. I'm always open to learning something new. Connect on Twitter if you want to discuss.

Hope this makes sense to you 🔥

Introduction to useState

Telmo Goncalves — Thu, 05 Mar 2020 10:22:53 +0000

I've been working with React Hooks for some time now and I thought about writing a quick and simple post on how to use useState.

Let us get started

First of all, we need to import useState from react

import React, { useState } from 'react'

Take into account the following function:

import React, { useState } from 'react'

function Steps() {
  return (
    <div>
      Today I've walked 0 steps.
    </div>
  )
}

Alright, we want to control the amount of steps we've walked today, for that we can use the useState method, let us take a look:

import React, { useState } from 'react'

Take into account the following function:

import React, { useState } from 'react'

function Steps() {
  const [steps] = useState(0)

  return (
    <div>
      Today I've walked {steps} steps.
    </div>
  )
}

What are we doing here?

Creating a new state called steps and its default value is 0
We're printing our steps value in our function

Control

Now we want to control the value of steps, with useState you can destructure another prop, so, currently we have const [steps], we will get another method from there, let us change that to const [steps, setSteps].

Now we've introduced setSteps, with this we can control the value of steps, let us create a button to handle an onClick function to set the steps to 10, try it out

import React, { useState } from 'react'

function Steps() {
  const [steps, setSteps] = useState(0)
  const increaseSteps = () => setSteps(10)

  return (
    <div>
      Today I've walked {steps} steps.

      <button onClick={() => increaseSteps()}>
        Increase steps
      </button>
    </div>
  )
}

When you click on our new button the steps should increase to 10, great.

We can do better

We might want to increase the steps by 1, not 10. You might be thinking it's as simple as changing 10 with 1, give it a try, I'll wait.

It only goes to 1 right? 🤷‍♂️

Nothing to worry, we'll fix it right now, change the increaseSteps() function:

const increaseSteps = () => setSteps(steps + 1)

What are we doing? We're getting the value of steps and increasing it by one.

You can also create another button to decrease the value, similar function but using -1:

const decreaseSteps = () => setSteps(steps - 1)

Result

I've spiced things a little bit with styling and an emoji 🙂

You can check the final code in this Codesandbox

If you liked this post consider following me on Twitter, appreciate it 🙂

Destructure Everything

Telmo Goncalves — Tue, 18 Feb 2020 18:41:39 +0000

Destructuring is a convenient way of extracting multiple values
from data stored in objects and Arrays.

Let's take a look on how to destructure an object:

const info = { name: 'Telmo', age: 33, twitterHandler: '@telmo' }

// Destructure data from `info`
const { name, age, twitterHandler } = info

console.log(name, age, twitterHandler) // Telmo 33 @telmo

What we've done here? Instead of accessing the data through info.name, info.age, etc;

We extracted the data from info, this way you prevent calling info.X multiple times.

Let's mock an example where you're making an API call, for this we'll be using JSONPlaceholder, you can take a look to figure out what it does.

A straight forward example is the one provided on the homepage, where we can fetch data from https://jsonplaceholder.typicode.com/todos/1 and it should return something like:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Let's build a simple component so we can then extract the data from the API call:

import React from 'react'

export default function MyComponent() {
  return (
    <div>My amazing component 🚀</div>
  )
}

Great, now let's assume the data from the API call is being passed to the component through props, we can either extract the data before we return our component:

import React from 'react'

export default function MyComponent(props) {
  const { userId, id, title, completed } = props

  return (
    <div>
      Task ID: {id}
      Created by user ID: {userId}
      Task title: "{title}"
      Completed: {completed}
    </div>
  )
}

Looks great, but we can still save at least one least in your code, take a look:

import React from 'react'

export default function MyComponent({ userId, id, title, completed }) {
  return (
    <div>
      Task ID: {id}
      Created by user ID: {userId}
      Task title: "{title}"
      Completed: {completed}
    </div>
  )
}

By extracting the data directly on MyComponent(), we no longer need to extract the data through const { ... } = props.

Let's play with brackets (Arrays)

Check the example bellow and notice the comments:

const myTags = ['React', 'Next', 'Gatsby']

// Get first element of the array
console.log(myTags[0]) // React

// Destructuring the array
const [tag] = myTags

console.log(tag) // React

Looks way better.

Going a little further, I found out about this just a few days ago, and it's
amazing how good the code looks using this. Let's imagine the following data structure:

"deliveries": [
  {
    "id": 337948,
    "shipments": [
      {
        "number": "FOO-5905959044",
        "products": [
          {
            "title": "Apple Pie"
          },
          {
            "title": "6 Pack Coronas"
          },
          {
            "title": "Doritos"
          },
          {
            "title": "Burgers"
          }
        ]
      }
    ]
  }
]

Let's destructure this sucker using the same component as before, assuming this data is being passed to the component props:

// Destructuring happening right here within `MyComponent()`
export default function MyComponent({
  data: { deliveries }
}) {
  return (
    deliveries.map(delivery => {
      const {
        id,
         // Beauty of destructuring arrays
        shipments: [shipment]
      } = delivery
      // Destructuring data from the first array of `shipments`
      const { number, products } = shipment

      return (
        <div>
          Order with ID {id} and tracking shipment
          number {number}

          <ul>
            {products.map(({ title }) => ( // Destructuring happening here within `()`
              <li>{title}</li>
            ))}
          </ul>
        </div>
      )
    })
  )
}

Hope it's clear enough and helped you in some way.

Follow me on Twitter 🔥

Curated Tech Courses

Telmo Goncalves — Sat, 25 Jan 2020 12:12:48 +0000

Hello everyone,

I've created a website with a curated list of awesome JavaScript courses and tutorials from the greatest minds in the community, handpicked.

Currently has 22 courses but my plan is to increase the courses over time, always keeping in mind quality.

I promised myself this year I would try to help more, no matter what's the approach, either directly, or by adding great courses in a curated list, I hope this helps you in some way.

https://js73.tech

Please do take a look if you have some feedback I will be glad to hear it 👇

I would love if you could follow @telmo and @useJS73 on Twitter.

Happened in Tech

Telmo Goncalves — Tue, 21 Jan 2020 12:21:18 +0000

I've been coding since 2007 when there were no fancy tools as we have today. I believe this is a great community that thrives to help each other on every chance they get.

I've decided to great a simple website, started with a Joined section, so developers can share how they ended up in the amazing tech world.

https://happened.tech

My idea is to expand the website into list resources, tutorials from great folks from the community. At first, I might focus more on ReactJS, GraphQL, etc;

Would love for people to contribute when the time comes, for now, if you want and feel like contributing you can share your story on how you ended up in the tech world.

You can find the source code here and open a pull request if you feel like it.

Thanks for ready, follow me on Twitter

filter() Array Method with Javascript

Telmo Goncalves — Mon, 13 Jan 2020 07:43:59 +0000

Recently I've found out about filtering array using type guards,
such as Number or Boolean and I thought it would be good to
write a small post about it.

I've posted a Tweet about this, which contain a really neat trick in my opinion:

Get rid of falsy values from an array, pretty neat.

🔥🔥#js #javascript #react #reactjs #programming #code #100DaysOfCode #tip #tips #array #mentor #coding pic.twitter.com/Y43WDmmJYE
— Telmo Goncalves (@telmo ) January 9, 2020

Let's do this.

Type Guards

Take the following array example, where we'll have both falsy statements and strings:

const arr = [false, 'NextJS', undefined, 'React', null]

My first approach here to filter the falsy statements and returns just the strings would be to go with something like the following:

const arr = [false, 'NextJS', undefined, 'React', null]

arr.filter(value => value && value) // ["NextJS", "React"]

Which is perfectly fine, although there's a more elegant way of doing this:

const arr = [false, 'NextJS', undefined, 'React', null]

arr.filter(value => value && value)
arr.filter(Boolean) // ["NextJS", "React"]

Both return exactly the same thing, aside from that I went ahead and tested the performance on both methods:

const arr = [false, 'NextJS', undefined, 'React', null]

// Took 0.030000024707987905 milliseconds to run
arr.filter(value => value && value)

// Took 0.004999979864805937 milliseconds to run
arr.filter(Boolean)

It's amazing how faster it is to use .filter(Boolean).

What about numbers and string?

I liked this so much I went ahead and tried filtering numbers and strings, I ran a couple of examples, let's start with numbers:

const arr = [1, 2, 3, "4", 5, "6"]

With this example we want to filter the numbers, removing all strings:

const arr = [1, 2, 3, "4", 5, "6"]

arr.filter(Number) // [1, 2, 3, "4", 5, "6"]

This returns exactly the same array, "4" and "6" are being considered numbers, because well, they are numbers. Javascript is a tricky fellow.

If we actually had strings in our array it would work fine:

const arr = [1, 2, 3, "Fancy", 5, "Array"]

arr.filter(Number) // [1, 2, 3, 5]

The only way I got to filter numbers, even when numbers are string ("4"), was by checking the data type:

const arr = [1, 2, 3, "4", 5, "6"]

arr.filter(value => typeof value === 'number' && value) // [1, 2, 3, 5]

I thought it was a simple and short post that can probably help someone, and I hope it does. If there's anything else that you think I should write about or you need some help just let me know.

Follow me on Twitter

Turning off the lights

Telmo Goncalves — Sun, 12 Jan 2020 21:19:04 +0000

After creating my blog, I thought it would be good to be part of all the Dark Mode hype. And since I've never done it, I tried it out.

Since I'd never really worked with NextJS aside from building my blog, I had to do some research before getting my hands dirty.

For this tutorial, I'll continue using the code from this post, although I'll leave the changes for this tutorial in a branch called dark-mode.

All right, let's get started

For this to happen we'll be using styled-components, if you're not familiar with it, I would suggest you take a quick look into their documentation.

In the root of your projects let us create a styles folder and a themes.js file:

mkdir styles && touch styles/themes.js

All right, we need a light and a dark theme, for that we can simply create 2 objects, one for each theme:

export const lightTheme = {
  body: '#FFFFFF',
  text: '#363537',
}

export const darkTheme = {
  body: '#101010',
  text: '#FAFAFA',
}

Don't worry about this, for now, we'll be using it later.

What I've done was creating a Layout wrapper that contains my global styles, theme styles and so forth. But before that let's define our global styles:

touch styles/global.js

Inside global.js we'll be using styled-components, so let's take care of installing it:

npm install styled-components --save

Let's start with something simple such as, background and text color:

import { createGlobalStyle } from 'styled-components';

// the `theme` object is comming from our ./themes.js file
export const GlobalStyles = createGlobalStyle`
  body {
    background-color: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text}
  }
`

Cool, we should be done with this, let's look into implement the themes.

Layout and Theme Switch

I've mentioned that I used a Layout wrapper to take care of styles, themes, and so forth. Let's create that wrapper:

mkdir components && touch components/Layout.js

Paste the following into Layout.js:

import React from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

// Default dark mode to true for now
const darkMode = true

function Layout({ children }) {
  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

We should be ready to wrap our pages with Layout, if you look at the codebase I've provided at the beginning of this tutorial you should see a file /pages/index.js, on that file change the following lines:

import React from 'react'

import Layout from '../components/Layout'

export default function Index(props) {
  return (
    <Layout>
      ✍️ My blog about {props.blogCategory}
    </Layout>
  )
}

Index.getInitialProps = () => {
  return {
    blogCategory: 'ReactJS'
  }
}

Run the following commands and access your application at http://localhost:3000:

npm install && npm run dev

You should see the background turned dark and the text white 🥳

Let there be light

Let's change the Layout wrapper to allow us to switch between dark and light mode. Go to the components/Layout.js file and let's make some changes:

import React, { useState } from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

// Default dark mode to true for now
const darkMode = true

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState(true)

  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

If you refresh the page, you should see the same behaviour: dark background, white text.

Let's make a quick change to check if our Light theme is working as well, change our darkMode state from true to false:

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState(false)

  // ...
}

Refresh the page; you should see the original theme: white background, dark text 👌

The Switch

We'll be using the setDarkMode method from the previous code, we'll create a <button> with an onClick prop:

import React, { useState } from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState(true)

  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <div>
        <button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? 'Light it up!' : 'Turn the light off!'}
        </button>
      </div>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

So, what are we doing with onClick={() => setDarkMode(!darkMode)}, we're setting the darkMode state by using the ! (not) operator, which inverts the boolean expression:

let darkMode = true

darkMode = !darkMode // false
darkMode = !darkMode // true

Persistence

You should notice that every time you refresh your application and theme falls back to the light theme, well, let's deal with that.

For that we'll take advantage of localStorage and React Hooks useEffect method. Let's take a look:

import React, { useState, useEffect } from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState(true)

  useEffect(() => {
    console.log(`Using dark mode? ${darkMode}`)
  }, [darkMode]) // Run every time `darkMode` changes

  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <div>
        <button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? 'Light it up!' : 'Turn the light off!'}
        </button>
      </div>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

Open your developer console, every time you switch between light and dark mode, you should see logs such as:

Using dark mode? false
Using dark mode? true
Using dark mode? false

Great, that means useEffect is working as expected. Although, is you refresh the page it keeps falling back to the light theme.

Let's use localStorage to fix that:

import React, { useState, useEffect } from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState(true)

  useEffect(() => {
    console.log(`Using dark mode? ${darkMode}`)
    localStorage.setItem('DARK_MODE', darkMode)
  }, [darkMode]) // Run every time `darkMode` changes

  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <div>
        <button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? 'Light it up!' : 'Turn the light off!'}
        </button>
      </div>
      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

You can check if this is working as expected in the developer tools console, under Application → Local Storage → http://localhost:3000, you should see:

Key	Value
`DARK_MODE`	`true` or `false`

Once again, on refresh it's still falling back to the light theme, to fix that we need to make a small change, we need to get the value from localStorage and set as our default darkMode state:

import React, { useState, useEffect } from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState()

  useEffect(() => {
    const darkModeValue = localStorage.getItem('DARK_MODE')
    // localStorage returns a string, not a boolean
    setDarkMode(darkModeValue === 'true')
  }, [])

  useEffect(() => {
    localStorage.setItem('DARK_MODE', darkMode)
  }, [darkMode]) // Run every time `darkMode` changes

  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <div>
         <button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? 'Light it up!' : 'Turn the light off!'}
        </button>
      </div>

      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

We could have got the localStorage value before setting the state, but localStorage is still not available because it's not part of NextJS, so this is a nice work-around.

What the flash?

You might have noticed that when reloading your application while in dark mode, the page kind of flashes between light and dark mode. Well, we also can use useEffect as a good work-around to prevent that, let's set another state – mounted:

// ...

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    const darkModeValue = localStorage.getItem('DARK_MODE')
    // localStorage returns a string, not a boolean
    setDarkMode(darkModeValue === 'true')
    // Set mounted to `true` only after setting the `darkMode` state
    setMounted(true)
  }, [])

  // ...
}

Alright, now we can simply render an empty <div /> before the component has been mounted, this will prevent the component to render our styles, ThemeProvider etc before we set the darkMode state:

import React, { useState, useEffect } from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalStyles } from '../styles/global'
import { lightTheme, darkTheme } from '../styles/themes'

function Layout({ children }) {
  // Use the state to determine darkMode
  const [darkMode, setDarkMode] = useState()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    const darkModeValue = localStorage.getItem('DARK_MODE')
    // localStorage returns a string, not a boolean
    setDarkMode(darkModeValue === 'true')
    // Set mounted to `true` only after setting the `darkMode` state
    setMounted(true)
  }, [])

  useEffect(() => {
    localStorage.setItem('DARK_MODE', darkMode)
  }, [darkMode]) // Run every time `darkMode` changes

  if (!mounted) return <div />

  return (
    // This will pass `theme` from `ThemeProvider` as a prop into `GlobalStyles`
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <div>
         <button onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? 'Light it up!' : 'Turn the light off!'}
        </button>
      </div>

      <GlobalStyles />
      {children}
    </ThemeProvider>
  )
}

export default Layout

If you reload your application, the flash between light and dark mode should be gone.

Source Code

You can find the source code of this tutorial here, don't forget it's under the branch dark-mode.

Follow me on Twitter 🔥

Build a markdown blog with NextJS

Telmo Goncalves — Sun, 12 Jan 2020 17:25:26 +0000

I've posted a Tweet about building my blog in less than an hour, and I'll be honest; it took me more time writing this post than actually putting the blog online.

Less than 1 hour. I've used NextJS for the first time and it's pretty amazing. And it goes without saying I've used @zeithq for the hosting 🔥

I might keep it updated, just wanted to check how long would take me to get a blog up and running.https://t.co/XsFjLYP7MU
— Telmo Goncalves (@telmo ) January 6, 2020

I'll try to explain the steps I took.

If you don't want to follow the tutorial download the Source code.

I've decided to go ahead and create a personal page/blog for myself, and since I'm a massive fan of Zeit and Now, that meant no time wasted thinking about hosting and deployments.

I have a few projects running with using GatsbyJS, and to be honest, I love it, it's easy to use, and really powerful if you plug a third-party such as Contentful. Although this time, I wanted to try something different, and since I love hosting and deploy my projects with Zeit, why not give NextJS a try? First time using it, and let me tell you it's freaking amazing.

Let's get started

Run the following:

mkdir my-blog && cd my-blog

npm init -y && npm install react react-dom next --save

If you're wondering -y means you don't have to answer all the npm init questions

Now, in your package.json file replace scripts with:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

If you go ahead and try to start the server npm run dev, it should throw an error, because NextJS is expecting to find a /pages folder.

So, let us take care of that, in the root of your project run:

mkdir pages && touch pages/index.js

Now you should be able to run npm run dev and access your application on http://localhost:3000

If everything is going as expected you should see an error similar to the following:

The default export is not a React Component in page: "/"

That's alright; keep going.

Our first view

In your pages/index.js file, paste the following code:

import React from 'react'

export default function Index() {
  return (
    <div>
      ✍️ My blog about Books
    </div>
  )
}

Check http://localhost:3000 you should see My blog about Books

Getting props

NextJS comes with a function called getInitialProps; we can pass props into our Index component.

Let us start with something simpler; at the end of your component lets put the following code:

import React from 'react'

export default function Index() {
  return (
    <div>
      ✍️ My blog about Books
    </div>
  )
}

+ Index.getInitialProps = () => {
+   return {
+     blogCategory: 'Books'
+   }
+ }

Here we're passing a blogCategory prop into our component, go ahead and change your component to look like the following:

export default function Index(props) {
  return (
    <div>
      ✍️ My blog about {props.blogCategory}
    </div>
  )
}

// ...

If you refresh the page, it should look exactly the same, although, if you change the value of blogCategory you'll see that it changes your view with the new value. Give it a try:

// ...

Index.getInitialProps = () => {
  return {
    blogCategory: 'ReactJS'
  }
}

The content of your view should now be: ✍️ My blog about ReactJS

Awesome, next!

Dynamic Routes

So, to build a blog, you want dynamic routes, according to the route we want to load a different .md file, which will contain our post data.

If you access http://localhost:3000/post/hello-world we'll want to load a file called hello-world.md, for that to happen let us follow the next steps:

First of all, NextJS is clever enough to allow us to create a [slug].js file, which is pretty awesome, let's go ahead and create that file:

mkdir pages/post

Note the folder and file needs to be created inside /pages

Now create a file inside /post called [slug].js, it's exactly like that, with the brackets.

Inside this file we'll create our post template, to display the post title, contents, etc.

Go ahead and paste the following code, we'll go over it in a minute:

import React from 'react'

export default function PostTemplate(props) {
  return (
    <div>
      Here we'll load "{props.slug}"
    </div>
  )
}

PostTemplate.getInitialProps = async (context) => {
  const { slug } = context.query

  return { slug }
}

In here we're accessing context.query to extract the slug from the URL, this is because we called our file [slug].js, let's say instead of a blog post you want to display a product page, that might contain an id, you can create a file called [id].js instead and access context.query.id.

If you access http://localhost:3000/post/hello-world you should see Here we'll load "hello-world"

Brilliant, let's keep going!

Loading Markdown Files

As a first step lets create a .md file:

mkdir content && touch content/hello-world.md

In the hello-world.md file paste the following:

--------
title: "Hello World"
date: "2020-01-07"
--------

This is my first blog post!

That's great; now we need to load the content of this file and pass it through props in our PostTemplate file.

Check the comments on the changed lines:

// ...

PostTemplate.getInitialProps = async (context) => {
  const { slug } = context.query
  // Import our .md file using the `slug` from the URL
  const content = await import(`../../content/${slug}.md`)

  return { slug }
}

Now that we have the data, we'll be using [gray-matter (https://www.npmjs.com/package/gray-matter) to parse our file frontmatter data.

frontmatter data is the information between --- in our .md file

To install gray-matter run:

npm install gray-matter --save

We can now parse the data and pass it to the PostTemplate props:

Don't forget to import matter

import matter from 'gray-matter'

// ...

PostTemplate.getInitialProps = async (context) => {
  // ...

  // Parse .md data through `matter`
  const data = matter(content.default)

  // Pass data to the component props
  return { ...data }
}

Awesome, now we should be able to access data in our component props. Let's try it, refresh the page... Ah, snap!

Are you getting a TypeError: expected input to be a string or buffer error?

No worries, we need to add some NextJS configuration to tell it to load .md files, this is a simple process, in the root of your project run:

touch next.config.js

Inside that new file paste the following code:

module.exports = {
  webpack: function(config) {
    config.module.rules.push({
      test: /\.md$/,
      use: 'raw-loader',
    })
    return config
  }
}

This will be using the raw-loader package, so we'll need to install that as well:

npm install raw-loader --save

Don't forget to restart your application

Now let's change our component to receive our new props:

// ...
export default function PostTemplate({ content, data }) {
  // This holds the data between `---` from the .md file
  const frontmatter = data

  return (
    <div>
      <h1>{frontmatter.title}</h1>
    </div>
  )
}

Refresh your page, you should see Hello World.

It's missing rendering the content, lets take care of that:

export default function PostTemplate({ content, data }) {
  // This holds the data between `---` from the .md file
  const frontmatter = data

  return (
    <div>
      <h1>{frontmatter.title}</h1>

      <p>{content}</p>
    </div>
  )
}

Ok, this is great, you should be able to see This is my first blog post!

Markdown Format

Now that we can render our markdown files fine, let's add some formatting to our post file, go ahead and change hello-world.md:

--------
title: "Hello World"
date: "2020-01-07"
--------

### Step 1

- Install dependencies
- Run locally
- Deploy to Zeit

Hmmm, the format is not working like expected, it's just raw text.

Let's take care of that, we'll be using react-markdown to handle markdown formatting:

npm install react-markdown --save

Now lets update our PostTemplate component:

import React from 'react'
import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'

export default function PostTemplate({ content, data }) {
  // This holds the data between `---` from the .md file
  const frontmatter = data

  return (
    <div>
      <h1>{frontmatter.title}</h1>

      <ReactMarkdown source={content} />
    </div>
  )
}

That's it; we are done here! You can download the final code here.

If you liked this post, I would really appreciate if you could share it with your network and follow me on Twitter 👏