`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.