Creating the blog page - part 8
Tags: javascript, webdev, beginners, nextjs
Published: 2022-10-15 19:49:43

Now that we have the homepage ready let's tackle the blog page.
A reminder of what the blog page looks like in the design:

![Blog design](https://cdn.hashnode.com/res/hashnode/image/upload/v1664947365544/CDNc7XPA-.png)

Hopefully, we can reuse the blog elements we created for the homepage.

That is the beautiful world of reusing components in different areas.

Let's get started!

## Creating the blog page

The first thing we'll want to do is ensure the page exists.

Create a new file called `blog.js` in the `pages` directory and use the following markup.

```js
import Head from 'next/head';

export default function Blog() {
  return (
    <div>
      <Head>
        <title>NextJS Blog</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <h1>Blog</h1>
    </div>
  );
}
```

![Blog page structure setup](https://cdn.hashnode.com/res/hashnode/image/upload/v1664947504292/Nsf4RyQHd.png)

Because we created a layout, the header and footer should already be there.
Now we have to start styling the inside part, where we rendered the heading that states the blog.

The first thing we want to tackle is for the element to be inside the container and have padding for the smaller screens. Unfurtionally we have to use two elements with the layout style we choose. (You can opt for one, but it will make the elements smaller and not pixel perfect)

```html
<section className="px-6">
  <div className="max-w-4xl mx-auto">
    <h1>Blog</h1>
  </div>
</section>
```

Then let's add some styling to this heading element.

```html
<h1 className="text-3xl font-bold mb-6 p-4">Blog</h1>
```

Let's take a look at how it looks so far.

![Blog partially styled](https://cdn.hashnode.com/res/hashnode/image/upload/v1664947904874/qAOWuCO-V.png)

That's pretty much what we are looking for. As dummy data, let's add some of the [articles we created before](https://daily-dev-tips.com/posts/styling-the-recent-posts-part-6/).

```js
import Head from 'next/head';
import Article from '../components/article';

export default function Blog() {
  return (
    <div>
      <Head>
        <title>NextJS Blog</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <section className='px-6'>
        <div className='max-w-4xl mx-auto'>
          <h1 className='text-3xl font-bold mb-6'>Blog</h1>
          <Article />
          <Article />
          <Article />
          <Article />
        </div>
      </section>
    </div>
  );
}
```

Let's see how it looks without any changes.

![Blog with articles](https://cdn.hashnode.com/res/hashnode/image/upload/v1664948056770/oQhKiYaQZ.png)

That's already nearly there, right?
The only issue I'm seeing is that we don't render the bottom border part for these items as it was not needed on the homepage.

We have two options here. We could simply pass a className and inherit it or set it as an option.
The className approach is generally better as we can perhaps use it later on for other things.

Open up your `article.js` file, and let's add a prop for the className.

```js
export default function Article({className = 'rounded-lg'}) {

});
```

Here we assign a new prop called `className` by default. I put the `rounded-lg` class in there as we don't want to use it for the detailed page.

Now we can use this className in this component like such:

```html
<article className="{`bg-white" p-4 ${className}`}></article>
```

Let's return to our `blog.js` file and modify it to include the border.

```js
<Article className='border-b-2' />
<Article className='border-b-2' />
<Article className='border-b-2' />
<Article className='border-b-2' />
```

Yep, that's it!
Let's check what we got and see if it matches the design.

![Blog styled elements](https://cdn.hashnode.com/res/hashnode/image/upload/v1664948706785/VsY_t64TG.png)

Pretty happy with that!

You can also find the completed code on [GitHub](https://github.com/rebelchris/next-portfolio/tree/part-8).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)