<SideNote title={👋  Some housekeeping} content={This is a top-level overview of how I built my blog. I’m working on a step-by-step beginner friendly tutorial for those who want to build their own. I’ll also provide the GitHub repo for a minimal personal website if you want to skip the build and get started with your own Next.js blog powered by a Notion CMS.} />

## The Stack

This blog is a Next.js application deployed on [Vercel](https://vercel.com/). I chose Vercel because they’re the company behind [Next.js](https://vercel.com/solutions/nextjs). Plus, you can deploy a site with a few keystrokes from the terminal or a couple clicks from within a repo.

For styling, I use [Tailwind](https://tailwindcss.com/). When I initially started building the blog, I wanted to learn how to use Tailwind and it was a good project for doing so. I like how easy it is to learn (if you know CSS already), though the inline styles can get quite long.

The email signup component is a custom built form powered by [Convertkit’s](https://convertkit.com/) API and [Next’s API routes](https://nextjs.org/docs/api-routes/introduction).

The critical part of the stack, and what I’m most proud of, is using [Notion](https://www.notion.so/product) as a [headless CMS](https://en.wikipedia.org/wiki/Headless_content_management_system).

## Notion as a CMS

I use Notion for everything. Life planning, writing, notes, brainstorm sessions, you name it. ***********Why not also use it as a CMS***********, I thought?

Previously, I was using Contentful as a headless CMS and that was…difficult. Writing and publishing a new post with their editor took as many click as it did to launch a Saturn V. Editing or trying to add images to a post was an awful experience.

That friction kept me from writing. So I wanted to remove it. Enter: Notion.

To get started, I created a database named `Blog CMS`. I then made a table with simple fields like `Title`, `slug`, `description`, `image` for Open Graph, a checkbox for whether or not I want it to be published, and a date for it to be published on.

![Screen Shot 2023-01-27 at 8.18.17 PM.png](How%20I%20Built%20my%20Blog%20with%20Next%20js%20and%20Notion%20with%20C%20d1b778f49e524b6aa67dbf49ae259f6c/Screen_Shot_2023-01-27_at_8.18.17_PM.png)

Following [this tutorial from *Bejamas*](https://bejamas.io/blog/how-to-create-next-js-blog-using-notion-as-a-cms/), I was able to fetch the Notion database using custom hooks and Next’s API routes. Using [notion-to-md](https://github.com/souvikinator/notion-to-md) via my API call, I turn the blocks from the body text into Markdown content.

```jsx
// pages/api/notion.js

export const getSingleBlogPostBySlug = async (slug) => {
    const response = await notion.databases.query({
      database_id: process.env.NOTION_BLOG_DATABASE_ID,
      filter: {
        property: "Slug",
        formula: {
          string: {
            equals: slug,
          },
        },
      },
    });
    const page = response.results[0];
    const metadata = getPageMetaData(page);
    const mdblocks = await n2m.pageToMarkdown(page.id);
    const mdString = n2m.toMarkdownString(mdblocks);
    return {
        metadata,
        markdown: mdString,
    };
  }
```

The downside of doing it this way is that I don’t have the luxury of displaying all of Notion’s block options. For example, if I use the `math` block in Notion, that just gets converted to a normal paragraph. There are ways around that, [like using an unofficial API from Notion](https://github.com/NotionX/react-notion-x), but I didn’t want to do that because the post body goes through one more mutation before it gets rendered.

In the component that renders the body of the blog post, the body text is passed through a [Markdown-to-JSX](https://www.npmjs.com/package/markdown-to-jsx) component. This converts the markdown content to JSX. At first glance, this may seem strange, but this is what allows me to write [custom React components](https://github.com/dmabery/dltn.io/blob/main/components/Subscribe.js) in my blog posts.

```jsx
// <PostBody />

import Markdown from "markdown-to-jsx"
import SideNote from "./SideNote"
import SquareWhileTap from "./SquareWhileTap"
import Subscribe from "./Subscribe"

const PostBodyContent = (props) => {
    return (
	    <div className="container mx-auto prose...">
        <Markdown options={{overrides: {SideNote, Subscribe, SquareWhileTap}}}>{props.content || ''}</Markdown>
      </div>
    )
}

export default PostBodyContent;
```

The `options={{overrides: ...` are custom React components that I’ve built. Passing them as options allows me to display them in blog posts.

So when I write this in a Notion page:

![Screen Shot 2023-01-27 at 8.11.02 PM.png](How%20I%20Built%20my%20Blog%20with%20Next%20js%20and%20Notion%20with%20C%20d1b778f49e524b6aa67dbf49ae259f6c/Screen_Shot_2023-01-27_at_8.11.02_PM.png)

It shows up like this:

<SideNote title={This is just an example} content={This is an example of my SideNote component. I can put it anywhere in a blog post and it will render with the title and caption that is passed via props.} />

Admittedly, other than the `<SideNote />` and `<Subscribe />` component, I use this functionality much less than I expected to, but it’s worth it just for the `<Subscribe />` component, because now I can put it anywhere in a blog post. Like right here (you should subscribe to learn five new things every Friday):

<Subscribe />

## Tags

Something that was also unnecessarily complicated to do in Contentful was create and use tags dynamically throughout the site. Aside from wanting to display them on the blog post page, I also wanted to create dynamic pages for each tag to list the corresponding posts. Notion solved this as well (though this much harder to do than I thought it would be).

In my `notion.js` API route, I have a `getTags` hook that looks like this:

```jsx
export async function getTags() {
    const posts = await getAllPublished()
    const allTags = posts.map(({ tags }) => (tags))
    const flattenedTags = allTags.flat()
    const tagSet = Array.from(new Set(flattenedTags))
    return tagSet
  }
```

First, I fetch all my blog posts. Then, I map through the `tags` property and make a new array of all the tags. I then use the `.flat()` method to take the array of the array of tags and “flatten” it into one array. Before `.flat()` method, `allTags` was an array of multiple arrays. At first I thought I could simply use `.stringify`, but that obviously didn’t work. The stringify method took one array, like this: `[ 'productivity', 'book'  ]` and made it into one string, naturally: `'productivity book'` , which isn’t what I wanted.

This is what `allTags` looked like before `.flat()`:

```jsx
console.log(allTags)
//output - multiple arrays
	[ '221b' ],
  [ 'productivity', 'book' ],
  [ '221b' ],
  [ 'personal', 'thinking' ],
  [ 'book', 'productivity' ],
  [ 'book' ],
  [ '221b' ],
  [ 'productivity', 'knowledge-mangagement' ],
  [ 'book', 'creativity' ],...

console.log(flattenedTags)
//output - one array; duplicate words
[
  '221b',                  'atomic-essay', 'atomic-essay',
  'reading-list',          'atomic-essay', 'atomic-essay',
  'atomic-essay',          '221b',         'productivity',
  'book',                  '221b',         'personal',
]
```

I then create a new `Set` to ensure there aren’t multiple instances of the same tag. Finally, I return that array.

```jsx
console.log(tagSet)
// output - one array; single instances
[
  '221b',              'atomic-essay',
  'reading-list',      'productivity',
  'book',              'personal',
  'thinking',          'knowledge-mangagement',
  'creativity',        'math',
  'science',           'history',
  'annotated-reading', 'writing',
  'programming',       'people',
  'technology',        'politics',
  'poetry',            'story',
  'til',               'reading',
  'framework',         'life',
  'psychology',        'questions',
  'thought',           'cs',
  'link',              'react',
  'links'
]
```

I call the `getTags` hook in my `/page/tags/[tag].js` page to create the dynamic paths for tags. Now, whenever I add a new tag to my Notion database, a page with a list of the corresponding posts gets dynamically created.

```jsx
export const getStaticPaths = async () => {
  const tags = await getTags()
  const paths = tags.map(( tags ) => ({ params: { tag: tags } }));
  return {
    paths,
    fallback: 'blocking'
  };
};
```

## Conclusion

That covers most of the unique (to me) technical aspects of the blog. The rest is standard React code with [Tailwind](https://tailwindcss.com/) to make it look pretty.

I have a `<Meta />` component that handles the SEO. I call it on every page to pass the title and description to.

The npm packages used are:

- [notion-to-md](https://github.com/souvikinator/notion-to-md) | `npm i notion-to-md`
- [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx) | `npm i markdown-to-jsx`

Thanks again to ********[Bejamas******** for the brilliant tutorial](https://bejamas.io/blog/how-to-create-next-js-blog-using-notion-as-a-cms/) that helped me lay the groundwork and original logic for using Notion as a CMS.


How I Built my Blog with Next.js and Notion with Custom React Components in Blog Posts

`getStaticPaths` always confused me. I never learned exactly ****what it did or how it works. I’d usually end up copying and pasting code from StackOverflow and pray for the best.

While migrating my headless CMS from Contentful to Notion, I ran into a problem though.

Most of the migration went smoothly…until I got to the code to make dynamic pages for the tags. I wanted to create a page, `/tags/[tag].js` , that would dynamically render a list of all the posts that contained the corresponding tag. The implantation is no different than doing any regular dynamic page in Next, but because it wasn’t for a blog post, I was lost. I almost gave up.

But just before I did, I had a realization: I didn’t ******really****** understand how the `getStaticPaths` function worked. I thought figuring that out might be a good place to start. **So in an effort to engrain it into my mind** and hopefully help another developer out, I wrote this post.

## getStaticPaths, explained

Just how `getStaticProps` passes data to the page component, `getStaticPaths` needs information to actually *****build***** the pages. Whatever you end up returning in `getStaticPaths` is what will be pre-rendered by Next at build time.

Let’s look at a simple example.

```jsx
export function getTags() {
    const tags =  ["programming", "reading-list", "books"]

    return tags.map((tag) => {
      return {
        params: {
          tag,
        },
      };
    });
  }

export const getStaticPaths = async () => {
    const paths = getTags();
    return {
      paths
    };
  };

```

Above is a code black that maps through my tags and then exports the `getStaticPaths` function. For simplicities sake, I’m not calling an API. Instead, I’m just passing `programming`, `reading-list`, and `book` to the variable `tags`.

Then, I’m mapping through the `tags` function and saying “For every item in the `tags` array, return an object, `params`, with the tag inside of it.

That’s the totality of what `getTags` is doing. It’s just getting a list of tags. Usually this will be a call to an API or a lib folder though.

I then call the `getStaticProps` function.

Inside that function, I say “Hey, `paths`, call `getTags`.” This will execute my `getTags` function. At this point, if I logged `paths` it would look like this:

```jsx
params: {
	tag: 'programming'
}
params: {
	tag: 'reading-list'
}
params: {
	tag: 'book'
}
```

Then from `getStaticPaths`, I return the `paths` variable as an object. Next will then go and build a page for every value in `params`

And that’s how `getStaticPaths` works. Whatever is returned from `getStaticPaths`, Next will use to render as the slugs for dynamic pages.

Inside my page component, I can destructure `tags` and then use the value of the slug on the page like this:

```jsx
const TagPage = ({ tag }) => {
	return (
		<h1>{tag}</h1>
		<p>All posts about {tag}.<p>
	)
}
```


getStaticPaths in NextJS Explained (Simply)

I'm taking an [advanced React course][1] and instead of powering through the tutorials to finish as fast as I can, I'm trying to slow down and make sure I understand each line of code. Naturally, I wanted to share for others to see and potentially benefit from.

The following lines of code come from a custom React hook to handle basic form submissions.

## The Code

First, I created a function and initialized state for my form inputs. When the hook is called, I can pass default properties to it.

```js
    import  {  useState  }  from  "react";

    export  default  function  useForm(initial  =  [])  {
	    // create a state object for our inputs
	    const  [inputs,  setInputs]  =  useState(initial);
```
I then created a function to handle the change of the form. It first destructures values from the event handler (using let because they will change). I then have some if statements checking to see if the input is a number or file because the behavior will change if either of those are true. Finally, I use the `setInputs` function to copy the current inputs and assign them to the value of the form. The spread operator copies the current inputs and overrides whatever is changed on the form.  I wrote `[name]` because it allows the function to be dynamically used on a form that changes the price, the name, or something else.

 ```js
    function  handleChange(e)  {
	    let  {  value,  name,  type  }  =  e.target;

	    if(type  ===  'number')  {
		value  =  parseInt(value);
    }
	    if(type  ===  'file'){
		    value[0]  =  e.target.files;
	    }

	    setInputs({
		    // copy the exisisting state
		    ...inputs,
		    [name]:  e.target.value,
		 });
	  }
```
Finally, I have some simple functions to reset the form to the initial properties (what was passed when the `useForm` function was called) and clear the form so it's empty.

The `clearForm` function is a bit confusing, but necessary. The `Object.entries` converts each of the inputs to arrays. Within each of those arrays are two other arrays, one for the property and one for the value. I then map over those arrays, destructure the key and value from them and assign new values of empty strings to them all. Finally, that's wrapped in an outer `Object.entries` function to convert those arrays back into an object. Next, I pass the `blankSlate` function to our `setInputs` state to clear the forms with the empty values passed during the mapping.

```js
    function  resetForm()  {
    	setInputs(initial);
    }

    function  clearForm()  {
    	const  blankState  =  Object.fromEntries(
    	Object.entries(inputs).map(([key,  value])  =>  [key,  ''])
	  );
	  setInputs(blankState);
    }
```

In the end, I return each of the functions I want available when I use the hook.

```js
    return  {
	    inputs,
	    handleChange,
	    resetForm,
	    clearForm,
    }
```

[1]: https://advancedreact.com/

Building a Custom React Form Hook

Conditional class rendering is pretty simple, but I've had to think through it a few times and always forget how to do it immediately. Hopefully this helps me and will help you too.

<SideNote title="Important ⚠️" content="I'm using Tailwind for my CSS, but if you're using custom CSS, the idea is the same, the classes will just be different." />

In this example, I'm trying to render different classes based on whether or not there is an `image` prop passed to my `PageTitle` component. I'm using this to display the title and description on my site, but on the home page I have a .gif that I don't want on any other pages. So on the home page, I'm passing an `image` prop and on the other pages I'm not. I have conditional rendering statement adding a div as a child to flexbox if there is an image prop.

The issue I was trying to solve was my mobile display of the `PageTitle` component. If there was an image, then the text covered 2/3 of the screen and the image was next to it. All good there. But if there wasn't an image, the text still covered 2/3 of the screen and created an awkward empty space. So on mobile, if there was no `image` prop, I wanted to take the `flex` property off the container but put it back for larger breakpoints because I didn't want to description text to span the entire page container. So here's what I did.

## The Solution
First, create a variable with a ternary operator to check whatever you want to check. In this case, if `image` was true, I wanted to add `flex` class. If `image` was `false`, I wanted to add `flex-none` and `sm:flex` breakpoint. `sm-flex` says "On break points larger than small, do this." `flex-none` is the behavior of all other breakpoints. In this case, just the `xs` breakpoint.

```javascript
const PageTitle = ({title, description, image}) => {

const condition = image ? 'flex' : 'flex-none sm:flex'
```

Next, I added that ternary operator as a string template literal to my classes on the container rendering the component:

```javascript
const PageTitle = ({title, description, image}) => {

const condition = image ? 'flex' : 'flex-none sm:flex'

return (
	<div className={`flex-row items-center ${condition}`}>
```

So if image is `true`, the `flex` container will be added as a `className` and the component will flex naturally. If it's false, on breakpoints smaller than `small`, it will be a normal, full-length row.

Note: If you don't have any classes there in both instances, you can just add the variable to the `className` and don't have to do a string template literal.

How to Add Conditional Class Rendering in Next JS

I love editing in VS Code, but I couldn't get my MDX files to wrap on a specific column width without affecting all my other files. I want my MDX files to wrap because that's how I write blog posts, but I don't want any of my JS files to wrap because it makes it much harder to read. After doing some research, I was able to piece together a solution.

Paste this code in your `settings.json` file

```js
    "[mdx]": {
        "editor.wordWrap": "wordWrapColumn",
        "editor.quickSuggestions": false,
        "editor.wordWrapColumn": 80,
    },
```

If you use markdown instead of MDX, change the `[mdx]` to `[Markdown]`.

How to Enable Word Wrap on Only MDX in VS Code

The following code example came after wanting to redirect my 404 page after someone landed on it. I've been using an astronaut for my branding and have been loving it. I found a picture of an alien beaming the astronaut into its spaceship, so wanted to 'beam' the user back home. The easy way out was to use a button and have them click it, but that didn't make sense to me. Since it's 'beaming', it should happen automatically. So I did the following:

```js

import { useRouter } from 'next/router'

const Custom404 = () => {
    const router = useRouter()
    useEffect(() => {
        const timeout = setTimeout(() => {
            router.push('/')}, 2000);

```

The first line of code imports `next/router` from Next, don't miss that step. Then, I added a `useEffect` hook to set the timeout interval. I had to use that function inside the `useEffect` hook because it can only run client side. When I tried it without the hook, I kept getting an error because it was running on build. Silly me.

The argument in `router.push` is the page you want to redirect to, so change as needed. I'm redirecting home.

How to Redirect Users to a Different Page After a Set Interval with Next.js

When you write code, you have a local development environment you're able to work on. This gives you a real-time look at what your code does and how it functions. Once you get it working as you wish in development, then you push it to production, which allows others to visit a URL and actually view it.

The development environment is as close to the production environment as it can get, but there are still flaws. You can solve for a lot of the errors before you push it to production, but sometimes while you're trying to push it to production, you get errors. This is infuriating.

"It works perfectly in development, why isn't working in production?!"

The worst part of this experience is the error message the production logs give are usually vague and not very helpful. Most of the time it's something along the lines of, 'Hey this page had an error. May the odds be ever in your favor."

Life is the same way.

You can prepare for a situation as much as you want, but practicing and being in the situation in real-life will never be the same thing. There are too many outside variables in real life affecting your environment. Sometimes, you're forced to solve the vague errors on the spot.