Rem Kim

Rem Kim - 2020-05-03

Setting up your Next.js Blog

How to setup and deploy your Next.js Blog? In this series I will describe the process of setting up Next.js project and deploying it to vercel.com

System requirements

Node 10.13 or later
Linux, MacOS system

Getting Started

Let's first install Next.js default starter project. In your terminal type

npx create-next-app YOUR_APP_NAME

This command will create a folder for your project and ask you if you want to install Default starter project or use existing Next.js templates from repository of examples. But we will use Default starter project.

If you don't want to use create-next-app just create project directory and run:

yarn init next-app
or 
npm create next-app

This will also create a project for you.

Now let's look at the structure of the created project.

.gitignore
README.md
node_modules
package.json
pages
public
yarn.lock

Let's go ahead and run a development server. Go to your terminal and type

yarn dev

The default port is set to 3000 and once you navigate to localhost:3000 in your browser you should see Next.js Index page

Next.js commands

If you take a look at package.json file you will see that by default you will have 3 commands to run:

dev - run a development server with development features such as hot reload
build - creates an optimized production build of your project
start - run a server. In a production mode based on your recent build

Pages

Everything we want to serve on the screen is stored in pages. Let's go ahead and edit existing pages/index.js file.

First we will erase existing content of the file and add our own.

 const Home = () => {
   return(
     <div>
       <h1>Welcome to my blog!</h1>
     </div>
   )
 }

 export default Home;

Also let's create another page and call it About page in pages/about.js

 const About = () => {
   return(
     <div>
       <h1>This page is about me!</h1>
     </div>
   )
 }

 export default About;

Good, now let's link those pages together and add some routing navigation. For that we will use 'Link' component from next/link

add the following line at the top of the pages/index.js and pages/about.js

import Link from 'next/link';

Let's update our pages to include links to each other.

index.js

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Welcome to my blog!</h1>
      <Link href="/about">Learn more about me!</Link>
    </div>
  );
};

export default Home;

about.js

import Link from "next/link"

 const About = () => {
   return(
     <div>
       <h1>This page is about me!</h1>
       <Link href="/">Back home</Link>
     </div>
   )
 }

export default About;

Now you should be able to navigate between those pages.

Routing in Next.js

As you might've already understood in Next.js all the routing maps to pages folder.

pages/index.js => / pages/about.js => /about

Say you want to add nested routes, how would you do it? Easy! Let's create 2 new routes: /blog to list out blogs and blog/[slug] to view each individual blogs.

First create a folder blog inside pages, then add 2 files:

index.js which will map to /blog route
[slug].js which will map to /blog/your-blog-slug route

and that's it!

Fetching data

Next.js supports both Static Generation and Server-Side Rendering. Depending on how you would like to fetch your data those two approaches are very handy!

In order to demonstrate Static Generation you will need to use 2 supporting functions in order to let Next.js to know how to generate pages during build time.

getStaticPaths helps generate routes
getStaticProps helps to fetch data during build time

Static Generation

Now here is an implementation of pages/blogs/index.js using Static Generation

const BlogsPage = ({ blogs }) => (
  <div>
    <ul>
      {blogs.map(blog => (
        <li>
          <a href={`/blog/${blog.slug}`}>{blog.title}</a>
        </li>
      ))}
    </ul>
  </div>
);

export const getStaticPaths = async () => {
  const blogs = require('./blogs.json');
  const paths = blogs.map(blog => ({
    params: {
      slug: blog.slug
    }
  }));
  return {
    paths,
    fallback: false
  };
};

export const getStaticProps = async () => {
  const blogs = require('./blogs.json');
  return {
    props: {
      blogs
    }
  };
};

export default BlogsPage;

as for blogs.json, here is a simple json file to have some mock data.

[
  {
    "title": "How to cook pasta. Easy 3 steps!",
    "slug": "how-to-cook-pasta-easy-3-steps",
    "content": "Some amazing recepy!"
  },
  {
    "title": "NextJS or GatsbyJS?",
    "slug": "nextjs-or-gatsbyjs",
    "content": "Obviously NextJS *winkyface*"
  },
  {
    "title": "Coding your first NextJS blog is easy!",
    "slug": "coding-your-first-nextjs-blog-is-easy",
    "content": "Blog and NextJS."
  }
]

Now if you navigate to http://localhost:3000/blog you should be able to see our super fancy styled list of blogs.

Server-Side Rendering

Let's make pages/blog/[slug].js in order to fetch each individual blog post using getServerSideProps

const Blog = ({ blog }) => (
  <div>
    <h1>{blog.title}</h1>
    <div>{blog.content}</div>
  </div>
);

export const getServerSideProps = async (req) => {
  const {slug} = req.query;
  const blogs = require('./blogs.json');
  const blog = blogs.find(bl => bl.slug === slug);

  return {
    props: {
      blog
    }
  }
}

export default Blog;

Conclusion

I hope you learned something new in part 1, of this Next.js blog setup series. In the next part I will tell how to make a simple CMS setup to be able to write your blogs using web interface and save files locally as json files. That way you don't need to have a database and you can use github as a data storage!

Here is a source code for our app enjoy!

next.js

vercel.com

blog

development

deploy

guide

Build Website for free with

SimplePages