DEV Community: Zachery Morgan

Hosting your NextJS App on Vercel.

Zachery Morgan — Sun, 24 Jul 2022 01:43:00 +0000

🎉 We're nearing the end of this guide. I've decided to take a different approach to the final lessons I plan to write.

Click here to skip the introduction and get straight into the lesson.

This series has grown much larger than I intended it to, so I want to wrap it up cleanly. By that I mean I would like to have the core of this project completed with this lesson.

But that in no way means this is the last lesson, just that by the end of this page you will have your blog hosted for everyone to read.

I am going to include additional lessons after this one that involve...

More styling
- If you recall I left the homepage styling up to you. Well I'm going to revisit that and add my own after this so you can see how I go about designing pages.
How to host your Sanity Studio on Vercel
- I'm going to show you in this writeup how to have your Sanity Studio online so you can make new posts. The only downside is it will have a unique url not tied to your website. We can change that and I will show you how to in the extra lessons.
Anything else I think of?
- This is a fun project for me and if I come up with anything I would like to include in the future I will write a post about it and add it to this Sanity Blog series.
Suggestions!
- If you have something you would like to accomplish with this blog but need a little help with let me know. If the topic is large enough for a post I will create one explaining my process for implementing the feature.

Now after all of those words, let's get into it.

Pushing to GitHub

Before doing any of this, make sure you have .env in your .gitignore file.

If you have made it this far I'm going to assume you have an understanding of GitHub.

If you haven't already created a repo on GitHub for this project, go ahead and create a repo and push your code.

Hosting on Vercel

Once your project is on GitHub, we will need somewhere to host it. Luckily Vercel is made for NextJS so this is rather simple.

Travel to Vercel.com and create an account if you don't already have one. I just signin with the GitHub option to make things easier.

After you have an account you should be routed to Vercel's Dashboard.

In the upper right you should see a New Project button. Click that button to be taken to the import page.

If you used GitHub as your login then this is automatic, but if you didn't then you can connect to your GitHub from here with the Add GitHub Account option.

After you are connected to your GitHub account you should see Import Git Repository with a list of recent repos. Your project should be in this list but if it isn't you can search for it with the search bar. Click Import next your your project.

You should now be seeing a screen that says Configure Project.

Each of these sections are important.

This is your project name on GitHub.
- I only include this so you can double check that you are importing the right project.
Click this dropdown menu to add you Environment Variables.
- These are the lines of code inside of your .env file we created at the start.
- For every line in your file, copy the name of the variable and paste it into the NAME input (3).
- Then copy the value of the variable and paste it into the VALUE input (4).
Once you have the variable name and value entered, click Add.

You should now have the 5 variables from your .env file input and you can see them below.

Once you have all 5 entered, click the Deploy button and vercel will deploy your project to a custom url.

If it deployed successfully you should now see confetti and a few different urls that take you to your site.

🥳 If everything worked then you should now be able to use the urls on your project page to travel to your blog website!

Congratulations!!

Hosting Sanity Studio

You have a blog on the internet for everyone to see, that's pretty cool. But what about our Sanity dashboard? It's not very convenient to use in it's current state. Let's host that using Sanity's own service!

Go back into your command line for your project and cd into your studio folder like you do to start your Sanity Dashboard.

When you are inside of that folder run...

sanity deploy

It will ask you for your project name, this will be in your url so you can pick whatever you want. I personally just use my project's name so I chose example-blog.

After choosing your studio hostname, it will take a little bit to complete but afterwards you should see this.

Go to the url that it prints out and tada! Your dashboard is now hosted online for you to create new posts!

Only people that you have given access to your Sanity project can access this.

You can assign permissions in your Sanity project page online.

This way we don't have to run sanity start to edit or create new posts!

One thing you can do is add a button element to your page that takes you to this url, but without authentication everyone will be able to go to it. Even if they don't have access to see your dashboard it's still a little weird having people be able to go to it so I just save the url to go to when I need it.

Problems Arise

I mentioned something at the very start of this series.

There are a few problems that will arise with trying to use v3 of Sanity.

There is no current way (that I know of) to redeploy your Vercel site when you create a new post, you have to do this manually

There are only a few plugins that currently work with v3, so options are limited

Now... the first bullet means when you make any edits to posts or add a new post you will have to manually redeploy your entire website on Vercel. It's not too hard to do, but it is annoying so I'm really hoping they release v3 of the Sanity Vercel plugin soon.

So I might as well go ahead and give a quick description of how to actually redeploy your site.

In your project dashboard on Vercel that shows all of your urls, you should see a Deployments button at the top. Click that.

You will now be on the Deployments page where you should see 1 entry for when you made you first deployed your project from Github. On the far right side of that deployment you should see 3 little dots, click those and then click Redeploy from the dropdown.

Now Vercel will run the redeploy and after around 1 minute your site will be hosted again with the changes you made in your Sanity Dashboard!

On the topic of the second bullet describing plugin support for v3. There is a very useful Github discussion about which plugins are currently available for v3 and which ones are being requested.

Vercel Deploy is on the list to be requested but there hasn't been any updates so we are still waiting unfortunately.

I do plan on making a quick little post explaining how plugins work with Sanity v3, I just felt like it wasn't that important for the scope of this series so it got skipped over for now.

Final Notes

After way too many delays in getting this series out, the core project is finally completed. You now have your own blog hosted online with a CMS dashboard!

Like I mentioned at the top, there is more to come but they are all extra features that aren't needed.

I appreciate anyone who has followed along, this is my first time attempting to create a series of posts walking through a project rather than 1 post per topic so I'm still learning how to convey so much information.

If you have any questions, difficulties, anything at all, don't hesitate to message me on Twitter and I will get back to you as soon as I can.

Thank You!!!♥

How to use Styled Components to Customize Your Blog.

Zachery Morgan — Fri, 22 Jul 2022 23:37:00 +0000

This is lesson 7 in a tutorial on how to create a blog using NextJS, Sanity, and Vercel.
If you are just here for help with Styled Components then you will need to implement your own text for the elements or follow my guide from lesson 1.

I also have a link to a working sandbox of this code in my Preview section that includes text data you can use instead.
I didn't implement responsiveness for small screens. I set up the entire post information in a grid so implementing it won't be difficult. I'm leaving it up to you to create your own unique mobile view!

I've done some tweaking to the props we fetch. I will explain that part after the Planning, so if you just want Styled Components, you can skip ahead.
You should also create additional posts (at least have 2 in total) to see our Recent Posts sidebar.

Planning

It is never a good idea to style from your code. What I mean is, you should have an idea ahead of time on how you want things to look (even sketch it out), then replicate that with your code.

On the topic of 'sketching it out', I did just that. In only a couple of minutes I was able to create this Figma design.

You might need to signup to view it if you don't have a Figma account, but it's worth it to have one. The amount of time you save by sketching things out cannot be understated.

I didn't make the most complex UI ever, but it's perfectly fine for our needs. You can also click each element and see it's name (purpose) on the left hand side of the screen under Layers > Desktop-1.

One of the elements is called Social Media Buttons, so we are going to go ahead and install an npm package that is standard for almost every project.

In the command line of your project, run

npm i react-icons --save &&
npm i react-portable-text

Reading the React Icons docs will explain how to use it and let you search for any icon you want. All we have to do is find the code for the icon we want, import it, and insert it like a React component.

React Portable Text is what we are going to use to display the body value we couldn't use in the last lesson.

I don't know of the best way to show all of my code. I don't want to host it incase it changes later, so unfortunately the best way I can think of is to just slap it here in blocks.

But I am going to break it down into 5 parts.

Imports
- The couple of imports we need for our page
Styled Components
- Our Styled Components (done in file, not imported)
HTML Structure
- Our HTML layout with content
Props
- Changes to our getStaticProps
Preview
- Online sandbox so you can see how it should look or copy the /pages/posts/[slug].js file.

Imports

This can look different for you if you choose to use additional icons, I'm just importing 3 basic ones for now.

import PortableText from "react-portable-text";
import styled from "styled-components";
import Link from "next/link";
import { BsFacebook, BsTwitter, BsInstagram } from "react-icons/bs";

We import..

PortableText to display the body of our post.
styled so we can create styled components.
Link to navigate to the homepage or to other posts.
The last line is importing a Facebook, Twitter, and Instagram icon from our react-icons.

Styled Components

FYI: I only spent a little over an hour on the styling. It isn't perfect and some of the code is redundant, but I'm already behind on this project so I just wanted to get something that looked nice in browser.

Before we get to the components, I added a couple things to our `/styles/globals.css` file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: 'Poppins';
  color: #333;
}

body {
  background: rgb(248, 248, 248)
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

Poppins is now our default font for everything.
#333 is the default font color for everything.
The body now has a background color of rgb(248, 248, 248).
- This is an off white color that is easier on the eyes.

Below your imports but above your Post component is where we will create our styling. Normally this is done in separate files, but since we aren't styling that many pages I don't see a reason to break it up.

I explained Styled Components very briefly at the start of these guides, but I will go over 1 I created for this page as a refresher.

Do not copy this into your file yet, it will be included in the full list of components I will post after this explanation.

const BackButton = styled.div`
  border: 1px solid #333;
  border-radius: 7px;
  text-align: center;
  font-size: 1.2rem;
  width: fit-content;
  padding: 4px 6px;
  transition: all 0.3s;

  :hover {
    background: #333;
    color: white;
    cursor: pointer;
  }

  span {
    position: relative;
    bottom: 3px;
  }
`;

First we create a component with the name of BackButton
- This is a React component so it must be Pascal case (each word capital).
We declare that this component is a styled.div
- styled. is from our import
- div is letting React know what kind of HTML element we are assigning. in this case it will be a <div></div>
- All you have to do to use it is replace <div></div> in your code for <BackButton></BackButton> and it will now be a div element with styling.
You also need to be aware that we are wrapping the CSS for our component in backticks.
Now inside is our basic CSS. I'm not going to go over the details of my CSS, or how I'm using grid for positioning because it's better for you to play around with it and find out yourself. But if you still do not understand the purpose of a line, you can either Google it, play around with it in your Browser DevTools, or even shoot me a message on Twitter and I can help explain further.
- We apply styling to our div element
- What happens when the div is hovered
- And finally we apply styling to any span elements inside of this div.

After that quick example, here is the entire block of code for all of our styling. Remember, paste this below your imports and above your Post component.

const PageContainer = styled.div`
  padding: 70px 110px;
  max-width: 1600px;
  margin-inline: auto;
`;

const BackButton = styled.div`
  border: 1px solid #333;
  border-radius: 7px;
  text-align: center;
  font-size: 1.2rem;
  width: fit-content;
  padding: 4px 6px;
  transition: all 0.3s;

  :hover {
    background: #333;
    color: white;
    cursor: pointer;
  }

  span {
    position: relative;
    bottom: 3px;
  }
`;

const ContentContainer = styled.div`
  display: grid;
  grid-template-columns: 0.5fr 2fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "header1 header header2"
    "socials main links";
`;

const Header = styled.header`
  grid-area: header;
  text-align: center;
  margin-bottom: 40px;

  h1 {
    text-transform: uppercase;
    color: #222222;
    font-size: 3rem;
  }

  span {
    color: #464646;
  }
`;

const SocialsContainer = styled.ul`
  grid-area: socials;
  display: flex;
  flex-direction: column;
  align-items: end;
  list-style-type: none;
  gap: 30px;
  padding-right: 50px;
  padding-top: 14px;

  li {
    cursor: pointer;
  }
`;

const StyledLi = styled.li`
  svg {
    transition: transform 0.4s;

    path {
      color: #4040ac;
    }
  }

  svg:hover {
    transform: scale(1.2);
  }
`;

const Body = styled.main`
  grid-area: main;

  h1 {
    text-align: center;
    font-size: 2.3rem;
    margin-bottom: 15px;
    padding-right: 160px;
  }

  h2 {
    margin: 5px 0px;
  }

  div {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
`;

const RecentPostsContainer = styled.div`
  padding-left: 50px;
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 20px;
`;

const RecentPost = styled.div`
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  align-items: center;
  transition: all 0.4s;

  p {
    font-size: 1.1rem;
    font-weight: 500;
  }

  span,
  p {
    transition: all 0.4s;
  }

  :hover {
    background: #333;
    cursor: pointer;

    span,
    p {
      color: white;
    }
  }
`;

I'm styling the post.body content from within the Body component.
As you can see I only targeted h1, h2, and div because those are what I have inside of my post's body. If you have other elements you can style them how you see fit, by targeting the type of the element and applying your style.

HTML Structure

Pasting all of that in won't do a darn thing until you add these components to your code.

Remember, your code will break because I changed how we import our posts. That will be explained next.

export default function Post({ post, posts }) {
  const postsElements = posts.map((post, index) => (
    <Link key={index} href={`/posts/${post.slug}`}>
      <RecentPost>
        <p>{post.title}</p>
        <span>{new Date(post.publishedAt).toDateString().slice(4)}</span>
      </RecentPost>
    </Link>
  ));

  return (
    <PageContainer>

      <Link href={`/`}>
        <BackButton>
          <span>👈</span>
          <a>Home</a>
        </BackButton>
      </Link>

      <ContentContainer>

        <Header>
          <span>{new Date(post.publishedAt).toDateString()}</span>
          <h1>{post.title}</h1>
        </Header>

        <SocialsContainer>
          <StyledLi>
            <a href="https://facebook.com">
              <BsFacebook size={"3rem"} />
            </a>
          </StyledLi>
          <StyledLi>
            <a href="https://twitter.com">
              <BsTwitter size={"3rem"} />
            </a>
          </StyledLi>
          <StyledLi>
            <a href="https://instagram.com">
              <BsInstagram size={"3rem"} />
            </a>
          </StyledLi>
        </SocialsContainer>

        <Body>
          <PortableText content={post.body} />
        </Body>

        <RecentPostsContainer>
          {postsElements}
        </RecentPostsContainer>

      </ContentContainer>

    </PageContainer>
  );
}

This is pretty simple, we are using our Styled Components we just created instead of normal HTML elements.

I will point out the couple of things that are important to take note of here.

export default function Post({ post, posts })

You can see we are now importing post AND posts. You will see why in a second.

const postsElements = posts.map((post, index) => (
    <Link key={index} href={`/posts/${post.slug}`}>
      <RecentPost>
        <p>{post.title}</p>
        <span>{new Date(post.publishedAt).toDateString().slice(4)}</span>
      </RecentPost>
    </Link>
  ));

We are mapping over the posts we fetch to create a list of links to every post (excluding the post we are currently viewing).

<BsFacebook size={"3rem"} />

React Icons are styled by this size attribute so we have these on each one to increase them to 3rem.

<Body>
    <PortableText content={post.body} />
</Body>

You can see our PortableText we imported being used to display the body of our post by adding it as the content.
It's annoying to style PortableText, so I just surround it in a styled div and apply the styling there.

<RecentPostsContainer>{postsElements}</RecentPostsContainer>

And finally our postsElements variable we created being surrounded by a styled component.

Props

I came up with the idea to display all of our blog posts in the right sidebar. Before we were only fetching our current post, but now we need to fetch all of them as well.

export async function getStaticProps({ params }) {
  const query = `*[_type == "post"] {
    _id,
    title,
    publishedAt,
    'slug': slug.current,
    body
  }`;

  let posts = await client.fetch(query);

  const post = await posts.find((post) => post.slug == params.slug);

  posts.splice(
    posts.indexOf(posts.find((post) => post.slug == params.slug)),
    1
  );

  return {
    props: { posts, post },
  };
}

Not a lot changed, but I'll explain the general idea of it.

We no longer fetch just the current post, we now get every single entry with a type of post.
After all of our posts are returned, we run a find method to match the post in our array the contains the same slug as our url params.
Then we splice out the post we just fetched because we don't want to display that one in our list of posts on the side.
Finally we return all of our posts excluding our current post, and our current post.

Preview

CodeSandbox Code -- Fullscreen Preview
Here you can view my code, there are some changes to remove fetching and the file structure is obviously incorrect. This is supposed to just be a reference to how the page and /pages/posts/[slug].js code should look for you (minus the slight changes).

That's the end of this part. We didn't alter our project too much, but we now have a great looking page to display each of our posts.

I know that was a lot of code, and there is always a possibility something goes wrong on your end. So if there is something you just cannot seem to fix, send me a message on Twitter and I will help you out as much as I can.

Next Lesson

I think I will skip styling the homepage for now. It would be a fantastic exercise to practice styled components.

At the end of the tutorial I'll have a link to this project which will include my personal styling if you are interested in that.

The next few lessons are going to be less code oriented and more involved with using Vercel, GitHub, and Sanity utilities.
Our goal is to...

Push our code to GitHub.
Deploy our website on Vercel.
Deploy our Sanity Studio interface to Vercel.

Thank you to everyone who has read these lessons!

How to Generate Dynamic Routes with NextJS and Sanity.

Zachery Morgan — Fri, 22 Jul 2022 02:12:00 +0000

Like in my last lesson, there will be a reference image of my file structure and file content so you can compare at the end.

Adding links to each post

Inside of your /pages/index.js file, we need to add links to each post that will take us to that specific post's page.

Start by adding NextJS's Link feature.



import Link from "next/link";

Now inside of our postsElements variable, wrap the entire element inside of a Link tag.



const postsElements = posts.map((post, index) => (
    <Link key={index} href={`/posts/[slug]`} as={`/posts/${post.slug}`}>
      <div>
        <p>{new Date(post.publishedAt).toDateString().slice(4)}</p>
        <h3>{post.title}</h3>
      </div>
    </Link>
  ));

A few things are happening here.

We moved our key={index} from our div to our Link because it is now our outer most element.
There is an href attribute which you should be familiar with. This tells the browser where to go to when the element is clicked. I have it taking us to a /posts/[slug] file that we will create soon.
There is also an as attribute. This is a cosmetic attribute that turns our url into one that displays the slug value we added to each post. This will be used later to search for specific posts.

That's all the code needed to allow us to link to a post's page when clicked. Now it's time to add that page in our project.

Displaying a single post

It is time for us to create the file I just mentioned.
Add a folder named posts in the pages folder, then add a file named [slug].js to that new folder. Your pages folder should now look like this.

The reason we add the brackets around our file name is so that we can reference it later.

This is called a Dynamic Route and will be referenced to multiple times in this lesson so I advise you to check out the docs for it. NextJS Dynamic Routes

Inside of our /pages/posts/[slug].js/ file we just created, we are going to add our parts one at a time.

Post component



export default function Post() {
  return;
}

Standard React component. We will add the content of this component in a little bit.

getStaticProps



export async function getStaticProps({ params }) {
  const query = `*[_type == "post" && slug.current == $slug] {
    _id,
    title,
    publishedAt,
    'slug': slug.current,
    body
  }`;

  const options = { slug: params.slug };

  const post = await client.fetch(query, options);

  return {
    props: { post: post[0] },
  };
}

This is very similar to the getStaticProps we added in our /pages/index.js file in the last lesson, but with a few additions.

We add our { params } as an argument.
- To explain this a little, getStaticProps has access to an argument called context. Within this context argument you have a few pieces of information to pull from. We use destructuring to pull out the params value.
- Inside of this params object is the url associated with this file. This is why we added the brackets to [slug].js.



[_type == "post" && slug.current == $slug]

Same query as before, except this time we remove our order option since we are only fetching one post, and instead we add && slug.current == $slug
- This will fetch an entry that has a type of post AND has a slug.current (the url we provided in our post) that matches the current pages url (more on this in a bit).



const options = { slug: params.slug }

We assign the current url to an object.
- Above I mentioned how we are using params to get our current url and naming it our slug. This is where that comes into play.
- The unique url for this post is inside of params.slug. We assign that value to the key slug within an options object variable.



const post = await client.fetch(query, options)

Here we simply call our fetch like before, but now we add our options object we created.
- This all works together because our options object has our url stored inside of it.
- Our query matches our post's slug.current with this url we saved in options to fetch us the post for the page we are on.



return {
    props: { post: post[0] },
  };

Finally we return our post. But since this fetched us an array, even though we only received 1 post, we make it easier on ourselves in our props by assigning the first (and only) object in our array to post so we can import it.

getStaticPaths

By far the hardest section to explain. Honestly I don't think I can give this function justice in text, so I'm going to give the basics and provide links that will explain what's happening in greater detail.

I mentioned Dynamic Routes earlier when we created [slug].js. From the NextJS getStaticProps Documentation it explains that...

If a page has Dynamic Routes and uses getStaticProps, it needs to define a list of paths to be statically generated.

Well, we have Dynamic Routes, and we used getStaticProps, so we must need this. The idea of this is NextJS will now pre-render every path that you specify inside of getStaticPaths.



export async function getStaticPaths() {
  const query = `*[_type == "post"]{ 'slug': slug.current }`;

  const posts = await client.fetch(query);

  const paths =
    posts?.map((post) => ({
      params: {
        slug: post.slug,
      },
    })) || [];


  return {
    paths,
    fallback: false,
  };
}

To see examples similar to this one you can review NextJS API-reference for getStaticPaths.

You might notice this seems very familiar to our getStaticProps. We need to create our query that fetches every post but only returns the slug.current value (the url we gave it), then give that query to our client.fetch.

But what is that paths variable? It looks more complicated than it is.

First it checks if there are any posts in the first place, that's why we add the ? to posts. If there isn't then we return an empty array with || [].
- Essentially meaning posts.map if there are posts, if there aren't then return [].

Now inside of our map. For each post we create...
- { params: { slug: post.slug } }
- This is fetching every single post's url and assigning it as a param for getStaticPaths to render at build time.

Finally we return our paths and a fallback: false
- Having fallback as false just means that other routes will 404 if you go to one that we didn't render in our map.

Rendering the post

We are now going to use the data from the post we fetched inside of our Post component we created.



export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <span>{new Date(post.publishedAt).toDateString()}</span>
    </div>
  );
}

Similar code to what we used in our homepage to display each post, but this time we are including the day of the week in the date.

You might have noticed we aren't returning the body of our post, that is because this requires a little more effort to render (and to style) so I will be including that in the next short lesson.

Wrapping up

If you go to your homepage and click one of your posts it will take you to that post's url displaying the data of that specific post.

In the next lesson I will be showing you how to...

Style a webpage with Styled-Components
Style Rich Text components

We will also be including a back button to navigate back to our homepage from a post.

References

File Structure

`pages/posts/[slug].js`



import client from "../../lib/sanity";

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <span>{new Date(post.publishedAt).toDateString()}</span>
    </div>
  );
}

export async function getStaticProps({ params }) {
  const query = `*[_type == "post" && slug.current == $slug] {
    _id,
    title,
    publishedAt,
    'slug': slug.current,
    body
  }`;

  const options = { slug: params.slug };

  const post = await client.fetch(query, options);

  return {
    props: { post: post[0] },
  };
}

export async function getStaticPaths() {
  const query = `*[_type == "post"]{ 'slug': slug.current }`;

  const posts = await client.fetch(query);

  const paths =
    posts?.map((post) => ({
      params: {
        slug: post.slug,
      },
    })) || [];

  return {
    paths,
    fallback: false,
  };
}

Fetching and Rendering Sanity Posts on your Homepage

Zachery Morgan — Sun, 17 Jul 2022 23:17:00 +0000

Like in my last lesson, there will be a reference image of my file structure and file content so you can compare.

Creating a Sanity client

We need to create a way for our app to fetch the data we store inside of Sanity. Luckily Sanity makes this very easy for us. You can read up more on what I'm using here. Sanity Client

npm i -g @sanity/client &&
npm i next-sanity

This will install the Sanity client globally to use for any project.
We need to create a folder in our root named lib and a file within that folder named sanity.js and paste this code in your new file.

const sanityClient = require("@sanity/client");
const client = sanityClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: "2021-03-25", // use current UTC date - see "specifying API version"!
  useCdn: true, // `false` if you want to ensure fresh data
});

export default client;

This code can be found on the Sanity Client package docs.

Fetching our posts

In your /pages/index.js file (not your /studio/schemas/index.js), at the bottom, you need to create an async/await function to fetch your data.

export async function getStaticProps() {}

While at the top of this page you need to import the client we just created.

import client from "../lib/sanity";

You can, and should, read up on getStaticProps here NextJS docs.
On that page it will explain what this function does, how it works, and when to use it. One of the reasons to use it is if The data comes from a headless CMS, which is exactly how we plan to use it.

Inside of our new function we are going to make a GROQ query to tell it what data to look for, how to order the data, and what pieces of that data we want returned to us.

export async function getStaticProps() {
  const query = `*[_type == "post"] | order(publishedAt desc) {
    _id,
    title,
    publishedAt,
    'slug': slug.current,
    body
  }`;

  const posts = await client.fetch(query);

  return {
    props: { posts },
  };
}

I'm going to break each part of this function down to make it easier to understand, because just copying and pasting code without the knowledge of what each piece means isn't going to be very useful later on.

const query = `...`
- Obviously this is just us declaring a variable for our query to use later. But what is important here is the fact that our code within the query is surrounded by back ticks.
*[_type == "post"]
- This is telling our client to grab every entry we have in our database that has a name of post
- You can see that we named our entries back when we created our 'Post' schema. That is what this "post" query is referring to.
| order(publishedAt desc)
- Simple enough, this is telling our query to return the 'posts' that it fetched in an order by the published date in descending order. This means newest posts return first.

 {
    _id,
    title,
    publishedAt,
    'slug': slug.current,
    body
  }

We are telling the fetch request what data we actually want returned. This is the power of GROQ, you only receive the data you want. Without this part you would get the entire 'post' data which looks something like this.

{
    "_createdAt": "2022-07-17T00:48:06Z",
    "_id": "f026b8eb-0fc6-4a58-8494-789def2703ff",
    "_rev": "IvZ71YmXkO22WtmwIxDKV0",
    "_type": "post",
    "_updatedAt": "2022-07-17T00:48:06Z",
    "body": (5) [{…}, {…}, {…}, {…}, {…}],
    "publishedAt": "2022-07-17T00:45:31.070Z",
    "slug": {
        "_type": "slug",
        "current": "the-art-of-creating-a-post"
    },
    "title": "The art of creating a post"
}

That's way more information than we need. So we are going to tell our query to only return to us the _id, title, publishedAt, slug, and body.
For the curious, slug is written as 'slug': slug.current because as you can see above, slug returns an object but we only need the current value, not the _type. So we are returning slug.current but assigning it to the slug key name.

const posts = await client.fetch(query);
- Simple fetch request that uses the client we created and imported in this lesson, the query variable we just added, and assigns the return to a new variable named posts
return { props: { posts } };
- Return props with our posts variable so our component can use it.

Rendering our posts

Back at the top of our /pages/index.js file we are currently in, we are going to add our posts variable we just fetched to our Home component.

export default function Home({ posts }) {
  return <h1>Hi :D</h1>;
}

We are able to grabs our posts data from the props value by a method called destructuring.

Now to create HTML elements from our posts array. We will handle this by mapping over the data and saving it to a variable.

const postsElements = posts.map((post, index) => (
    <div key={index}>
      <p>{new Date(post.publishedAt).toDateString().slice(4)}</p>
      <h3>{post.title}</h3>
    </div>
  ));

This will return a div with a p and h3 tag for each post we have.
We need the outer div simply because you need multiple elements to be wrapped in 1 so you can return it. Returning the p and the h3 without wrapping it in something will throw an error. We also add the key to this with the index of it's position in the array so React doesn't scream at us. (this is very useful to read up on, it gave me hours of debugging when I started learning React).

We add a p tag with the publishedAt value turned into a Date, turned into a string so HTML can read it, and we slice off the first 4 characters of the string (essentially removing the day of the week).

And finally an h3 with the title of our post.

Now if you add this variable in your return (wrapping it again in an outer div for the same reason as above, you must return 1 outer HTML element) like this.

return <div>{postsElements}</div>

Closing your current npm run dev and starting it again you should see all of your posts (but only the title and published date) on your homepage by date they were published.

It's quite ugly right now, but that's not the point. I will create a future lesson, or maybe edit this one, to add the methods I'm going to use to style it. I just want to get this out in the meantime to help people that need it.

Upcoming lessons

That's everything for this part. I might have went overboard explaining every little detail, but all of these concepts are very fundamental and will be reused later in this project (and most likely in your future projects). So I wanted to help you get a grasp of how everything works so you will have the knowledge to explore and make something yourself.

In the next part I will explain how to create dynamic urls for your posts so you can see the full information for it on it's on page.

References

- File Structure

- /pages/index.js

import client from "../lib/sanity";

export default function Home({ posts }) {
  const postsElements = posts.map((post, index) => (
    <div key={index}>
      <p>{new Date(post.publishedAt).toDateString().slice(4)}</p>
      <h3>{post.title}</h3>
    </div>
  ));
  return <div>{postsElements}</div>;
}

export async function getStaticProps() {
  const query = `*[_type == "post"] | order(publishedAt desc) {
    _id,
    title,
    publishedAt,
    'slug': slug.current,
    body
  }`;

  const posts = await client.fetch(query);

  return {
    props: { posts },
  };
}

- /lib/sanity.js

const sanityClient = require("@sanity/client");
const client = sanityClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: "2021-03-25", // use current UTC date - see "specifying API version"!
  useCdn: true, // `false` if you want to ensure fresh data
});

export default client;

Creating a schema in Sanity for blog posts 📃

Zachery Morgan — Sun, 17 Jul 2022 00:37:03 +0000

If by the end of this lesson things are not working, there will be a screenshot at the very end that you can reference to make sure your files are in the right place

Creating the schema

Create a file named post.js inside of your /studio/schemas folder and paste this text inside of it.



const post = {
  title: 'Post',
  name: 'post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
    },
    {
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
    },
    {
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [
        {
          type: 'block',
        },
      ],
    },
  ],
  preview: {
    select: {
      title: 'title',
    },
  },
}

export default post

This looks far more complicated than it actually is. You are essentially creating an object to add data to later.

name is the key name in your object with the values being what you add later. So this Post schema will read like...



post = {
 title,
 slug,
 publishedAt,
 body
}

title is the text that displays over the field when you create a post (I will point this out when we have our schema fully implemented)

type is simply the type of the value that will be inside of the key. You can find a list of the types here... Sanity schema types

The body object might seem a little odd, but this is just how you add a Rich Text editor. More info on that can be found here... Sanity block type

slug is going to be used for our url

Adding your new Post schema to Sanity

So you created a schema for a blog post, but that's all you've done, Sanity doesn't know it exists. Luckily adding it to our list of schemas is incredibly simple now.

Inside of your /studio/schemas/index.js file you should see this



export const schemaTypes = []

Now all you need to do is import your post.js file and add it to that array of schemas and you're ready to start writing your posts.



import post from './post'

export const schemaTypes = [post]

It might be beneficial for you to take a look inside of your /studio/sanity.config.js file to help get an understanding of how this is working. You should see these 2 sections in there.



import {schemaTypes} from './schemas'

schema: {
    types: schemaTypes,
  },

This is importing the schemaTypes variable from above with our array of schemas and assigning it to the schema.types value.

Writing a post in our studio dashboard

If you cd into your studio folder and run sanity start, like we've done in the previous lessons, you should now see your 'desk' with Post.
If you click Post it will open up all of your posts, but at the moment you don't have any.
Click the pencil and paper icon next to post and you should see a form with all of the fields we specified on our post schema.

There's a lot going on here so I figured I'll break each important item down.

This is the name of your project which by default is the name of your folder. I only mention this because you can actually edit this part in your sanity.config.js by changing the title value if you want it looking a little more professional.
This is a list of all of your schemas displayed by the title we gave them in the file. Currently we only have 1 so this is alright.
This is letting you know which schema you are currently under and will display all of your entries for that schema. So we are under our 'Post' schema and currently do not have any posts.
The button to add an entry for your select schema.
This is the form section that will pop up after you click on section 4.
Remember earlier how I mentioned that I will point the title out? Well now I am! These are what we defined in our schema as the title.
Pretty self explanatory, but this is the entry field for the section.
This is the body input that we added in our schema. See how adding that array type gives us this Rich Text editor?
Button to publish your entry.
Additional options for your entry, including to unpublish or delete it.

Creating a post

If you fill out the 4 inputs and click Publish, you should now see a post in the middle section displaying the title of your post.

You can edit the post with the pencil icon next to it.

Another good thing to point out is that this currently displays the title of our post. This isn't done automatically, we implemented that inside of our post schema with this section.



preview: {
    select: {
      title: 'title',
    },
  },

If you were to change 'title' to 'body' it would instead display the body of your post in this section.

I also want to point out the slug input. With Sanity v2 it is simple to force your slugs to be standardized so that your url's can all follow a similar pattern. In v3 I'm not entirely sure how to make this work anymore so I would advise you to try and keep your slugs in some sort of consistent pattern manually (like copying the title in lowercase and exchanging spaces for dashes).

Mission Accomplished

You should be all set to write as many posts as you want.
As an exercise you could look at the Sanity docs for additional schemas to practice implementing, or even try creating your own.
This is simple enough, just create a new file like we did for our post.js, add the code for the schema, import that into index.js and add it to our array!

In the next post I will explain how to display your posts on your page instead of just in your studio dashboard.

References

Getting started with Sanity

Zachery Morgan — Thu, 14 Jul 2022 23:24:20 +0000

Creating a Sanity account

Go to sanity.io
Click log in
Click create an account
Sign up, I use GitHub for this

You should get routed to your Sanity dashboard sanity.io/manage

Setting up Sanity CLI

Install the Sanity CLI globally by running this in a command line.
i is short for install
-g is to install a package globally



npm i -g sanity@dev-preview

The global install for sanity v3 might be outdated by the time you read this. You may no longer need '@dev-preview', or you may need something else entirely. It's best to check the docs or npm package before committing to it so you're not stuck later on.

Then, make sure you are still inside of your project folder and run



sanity init

It should ask you to login, use the method that you used when signing up. So for myself I would select GitHub
If this is your first project then it will ask you for a project name, if you already have a project it will ask you to create a new one or use existing. When you select Create new project, (or you don't have any projects yet), you will be asked for a project name.
I'm going to name mine example-blog just because that is what my project folder is called.
Hit enter to accept default data config.
Edit the last path in your output path from the folder name to studio

EXAMPLE



From this:
\Documents\Projects\tutorial\example-blog\example-blog
To this:
\Documents\Projects\tutorial\example-blog\studio

5 . Select Clean project with no predefined schema as the template to start with a fresh setup.

6 . Hit enter to select no to using TypeScript

And that should be it! Sanity is now setup and if you run this you should be taken to your project's dashboard on Sanity.io.



cd studio && sanity manage

Connecting our app to our new Sanity project

Go back into your text editor and create a filed name .env in the root folder.
This is where we are going to put the environment variables to connect our project.
Make sure you add .env to your .gitignore file as well so that your variables don't get leaked on GitHub.

Add this code to your new .env file



SANITY_STUDIO_API_PROJECT_ID=""
SANITY_STUDIO_API_DATASET="production"
NEXT_PUBLIC_SANITY_PROJECT_ID=""
NEXT_PUBLIC_SANITY_DATASET="production"
SANITY_API_TOKEN=""

For both of the PROJECT_ID lines we will add the PROJECT ID from our project's dashboard we opened when we ran sanity manage.

Now back in your dashboard...

Click API on the right
Scroll down to Tokens
Click Add API token
Add a name (I used example-blog)
Select Editor
Copy the token that it created
Paste it into your .env file for SANITY_API_TOKEN

Launching our Studio

To make sure this all works, go back into your command line, inside of your studio folder and run



npm i url && sanity start

The url install is just to fix an error that will prevent studio from launching.
After this runs it should tell you that



Sanity Studio is running at http://localhost:3333

Go to that url in your browser and login with the same credentials you've used all lesson for Sanity.
If it all works you should see a screen like this at url localhost:3333/desk

Don't worry about that warning, it just means that we haven't given Studio any data yet, we will do that in the next lesson.

That's everything to get Sanity Studio up and running locally. In the next lesson I will show you how to add your own datatypes and data.

Setting up NextJS and Styled Components💅

Zachery Morgan — Thu, 14 Jul 2022 01:45:06 +0000

Creating the app

npx create-next-app@latest example-blog && 
cd example-blog

This will...

Create a NextJS app in a folder named example-blog
Put you inside of the folder you just created

Installing Styled Components

npm i --save styled-components &&
npm i --save-dev babel-plugin-styled-components

This will...

Install styled-components into our example-blog folder
Install a babel plugin that allows us to see class names in the browser (with additional work to come)

Now open up whichever editor you use, I will be using Visual Studio Code, and open the pages/index.js file.
an easy way to do this is to go back to your console and type code . to open up the folder in VSC

To explain what the babel plugin does, I'm going to create a styled component for this page.
Under the imports that already exist, add this code.

import styled from 'styled-components';

const Container = styled.div`
  background-color: black;
  color: white;
`

What this does is...

Import the ability to create styled components
Create a variable named Container that we declare is a styled div
Assign plain CSS to our Container variable

Next I am going to replace an element with our new Container div. Click the arrow next to the outermost div to collapse it.

Then I am going to replace those 2 lines with this...

Now if you go to your console and type

npm run dev

You will see the basic NextJS homepage, but now with a black background and white text that we assigned in our styled component.

But we have a problem, our div we created now just has random numbers and letters for a class name. There's no way of figuring out where an element is getting its styling from. This is where that babel plugin comes into play.

In your root folder, create a file name .babelrc
And inside of that file add this code.

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}

Now hit ctrl-c in your console to stop your server, and type npm run dev again.

This time in your console you should see that your div now has a class name that tells you which folder the styled component lives in (pages) and what the name of that component is (Container)

Spring Cleaning

To clean up our project a little we are going to remove the files we won't be using with this guide.

pages/api folder can be deleted
styles/Home.modules.css file can be deleted
I am also going to go ahead and import 'Poppins' font and place it inside of my globals.css file for the body to apply it to everything.

This will break your app because index.js is using these styles.
To fix this you can just remove everything from the return and add <h1>Hello</h1> or anything you want (we will be adding content to this file soon)

Creating an online blog with NextJS, Sanity, and Vercel

Zachery Morgan — Thu, 14 Jul 2022 00:21:43 +0000

I recently came across Sanity, a CMS that seems to have a lot of potential. Except for 1 problem, it's updating to v3, at the moment, which breaks everything and turns old guides obsolete.

I stumbled through forums and docs to try and figure it out myself so why not document what I found?

The styling will be minimalistic (styled components) and the content will be sparse because I'm more focused on showcasing how to get a project like this up an running.

In the end you will have a...

Homepage that will display all of the blog posts.
Template page to display an individual post when clicked
Link to Sanity Studio so you can create your posts
Blog hosted on your own Vercel domain

There are a few problems that will arise with trying to use v3 of Sanity.

There is no current way (that I know of) to redeploy your Vercel site when you create a new post, you have to do this manually
There are only a few plugins that currently work with v3, so options are limited

So because of this, I wouldn't recommend building anything large with this yet. But when v3 is fully released and stable (with better plugin support), you will already know how to get started.

Let's get started.

Using Tailwind with Sanity and Next

Zachery Morgan — Tue, 12 Jul 2022 01:56:07 +0000

I've never had issues with Tailwind and Next, but today I'm learning Sanity and met a new error to add to my collection.

Typically when adding Tailwind to Next, all you need to do is...

npm i -D tailwindcss autoprefixer postcss
npx tailwindcss init -p
Add your tailwind imports to styles/globals.css:
@tailwind base; @tailwind components; @tailwind utilities;
Edit your tailwind.config.js file

/* tailwind.config.js */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Only to see this on my homepage when running sanity start

After a little searching I came across this reply in the Tailwind Github.

/* tailwind.config.js */
const path = require("path");

module.exports = {
  content: [
    path.join(__dirname, "./pages/**/*.{js,ts,jsx,tsx}"),
    path.join(__dirname, "./components/**/*.{js,ts,jsx,tsx}"),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* postcss.config.js */
const path = require("path");

module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, "tailwind.config.js"),
    },
    autoprefixer: {},
  },
};

https://github.com/tailwindlabs/tailwindcss/issues/6393#issuecomment-1080723375

Shoutouts to wanjas

Ingredients. #3

Zachery Morgan — Mon, 25 Apr 2022 00:52:14 +0000

1 cup of State
1 lb of Reducers
Mix in a medium sized Store until well blended.

I obviously wasn't talking about recipe ingredients. That'd be silly. I need to create the backbone of Redux, and for that I'm going to start off with 3 things. State, Reducer, Store

`/src/features/recipes`

Inside of this folder I'm going to add the file that will hold our recipes state.

`cd /src/features/recipes && touch recipesSlice.js`

Now inside of this file we need to accomplish a few things.

Create our initial state.
Create our reducer.

But before any of that happens, we need to figure out what our state is going to look like. What is the structure of a recipe anyway? Well, for now, I'm not going to spend too much time trying to decide that. I'll implement the essentials and add onto it later if I come up with more data that it needs or a better way to structure it. I just want a working store I can start testing in the meantime.

`import { createSlice } from '@reduxjs/toolkit'`

This is a beautiful tool that I will expand more on when we get to it, but for now let's just import it.

This is the outline of my state. An array containing recipe objects that have keys of...
typeof meal === string
typeof ingredients === array of objects
typeof directions === object with key names for arrays

This for sure isn't going to be the end solution, I already have ideas of what else to add, like date created and id's. But for now, this is enough to get us going.

The creation of our reducer. Now I don't want to spend too long explaining each line of this, I'm assuming anyone reading this understands what it is I've written, but I am going to give a brief overview.

`createSlice({})`

An Action Creator, Reducer Creator, and even lures me into a false sense of security with the ability to mutate state however I want... Just beautiful.

`name: 'recipes`

Pretty self explanatory, it's the name of our state for this slice. Our state now contains state.recipes.

`initialState`

We pass in the state variable we created earlier so our reducer has something to work with at the start.

`reducers: {}`

This is where the magic happens. Inside of this I will write each of my action creators. Later on this will contain many more actions, prepare callbacks, and general state update shenanigans.

`addMeal: (state, action) => {`

Our very first reducer! How cute. Now, to break it down..

addMeal is our action. It is what we will dispatch later on to run this reducer.
state and action will get passed in because we need access to the payload
state.push(action.payload) above this you can see a comment showing what the action.payload will look like destructured. We will simply push the action.payload object containing our new recipe to the end of our state.

Now of course, let's export the addMeal action and the overall recipesSlice reducer.

This has gotten longer than I anticipated, but I'm almost done I promise.

`src/app/store.js`

This is pretty self explanatory, and the only thing that's different than the original boilerplate is the name of our reducer.

`recipes: recipesReducer`

This let's our store know that anytime state.recipes is being interacted with, to let recipesReducer handle it.

Setup begins. #2

Zachery Morgan — Sun, 24 Apr 2022 23:17:09 +0000

Let's get right into the action.

Creating React / Redux from template

npx create-react-app table-prep --template redux cd table-prep code .

You've all seen it, such a beautiful series of letters and dashes. Even ending in punctuation! It's like it was meant to be. But we're not done. I'll be adding more in the future, but for now I'm going to add just one of my favorites.

Adding Styled Components Package

npm install --save styled-components

I will be using Styled Components for my components. It's beautiful, not just in the browser but also in it's reusability and organized file structure.

On the topic of beautiful, let's go ahead and add some scripts to to enable easy linting.

Adding Scripts

Inside of package.json we are going to add 2 lines of code to our scripts object.

"lint": "eslint ."
Allows us to run npm run lint in our terminal to check for linting errors in all of our code.

"format": "eslint . --fix"
Allows us to run np run format in our terminal to have eslint edit our files for us to fix errors or warnings (when it's something that eslint is capable of fixing).

Removing some of the boilerplate.

src/App.js
I removed all of the code within the <div className="App></div>

src/features
I removed every file from within features and any references to the exports in other files.

src/app/store.js
I removed the old reducer

And.... That should be it for now. I might have removed something I forgot about, and I will definitely remove / clean up some of the files later on. But for now, it's time to actually start writing code.

Header Photo by Lukasz Grudzien on Unsplash

Join me in my journey through Redux (and food). #1

Zachery Morgan — Sun, 24 Apr 2022 22:43:52 +0000

I enjoy cooking, I enjoy web development, and I really enjoy React/Redux. What better way to put those all together than with a tried and true...
Recipe Project!

For now I am calling this project TablePrep but that is very much subject to change when I actually come up with a good title.

As I embark on this well traveled road, I'm going to document my learnings, struggles, and hopefully success.

Imagine this blog as a git commit for my life.

Why?

Experience
Portfolio Project
Learn languages and recipes

How?

React / Redux
Styled Components
Firebase (later)

Header Photo by Anshu A on Unsplash

DEV Community: Zachery Morgan

Hosting your NextJS App on Vercel.

Pushing to GitHub

Hosting on Vercel

Hosting Sanity Studio

Problems Arise

There are a few problems that will arise with trying to use v3 of Sanity.

Final Notes

How to use Styled Components to Customize Your Blog.

Planning

Table of Contents

Imports

Styled Components

Before we get to the components, I added a couple things to our /styles/globals.css file.

HTML Structure

Props

Preview

Next Lesson

Thank you to everyone who has read these lessons!

How to Generate Dynamic Routes with NextJS and Sanity.

Adding links to each post

Displaying a single post

Post component

getStaticProps

getStaticPaths

Rendering the post

Wrapping up

References

File Structure

pages/posts/[slug].js

Fetching and Rendering Sanity Posts on your Homepage

Creating a Sanity client

Fetching our posts

Rendering our posts

Upcoming lessons

References

- File Structure

- /pages/index.js

- /lib/sanity.js

Creating a schema in Sanity for blog posts 📃

Creating the schema

Adding your new Post schema to Sanity

Writing a post in our studio dashboard

Creating a post

Mission Accomplished

References

Getting started with Sanity

Creating a Sanity account

Setting up Sanity CLI

Connecting our app to our new Sanity project

Launching our Studio

Setting up NextJS and Styled Components💅

Creating the app

Installing Styled Components

Spring Cleaning

Creating an online blog with NextJS, Sanity, and Vercel

In the end you will have a...

There are a few problems that will arise with trying to use v3 of Sanity.

Using Tailwind with Sanity and Next

Ingredients. #3

/src/features/recipes

cd /src/features/recipes && touch recipesSlice.js

import { createSlice } from '@reduxjs/toolkit'

createSlice({})

name: 'recipes

initialState

reducers: {}

addMeal: (state, action) => {

This has gotten longer than I anticipated, but I'm almost done I promise.

src/app/store.js

recipes: recipesReducer

Setup begins. #2

Let's get right into the action.

Creating React / Redux from template

Adding Styled Components Package

Adding Scripts

Removing some of the boilerplate.

Join me in my journey through Redux (and food). #1

Why?

How?

Before we get to the components, I added a couple things to our `/styles/globals.css` file.

`pages/posts/[slug].js`

`/src/features/recipes`

`cd /src/features/recipes && touch recipesSlice.js`

`import { createSlice } from '@reduxjs/toolkit'`

`createSlice({})`

`name: 'recipes`

`initialState`

`reducers: {}`

`addMeal: (state, action) => {`

`src/app/store.js`

`recipes: recipesReducer`