Creating the blog page

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

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.

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

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)

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

<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

That's pretty much what we are looking for. As dummy data, let's add some of the articles we created before.

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

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.

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:

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

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

<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

Pretty happy with that!

You can also find the completed code on GitHub.

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 or Twitter

Creating the blog page - part 8

Comments

Next portfolio

Creating the work page - part 9

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Creating the blog page

Thank you for reading, and let's connect!

Command Palette

Comments

Next portfolio

Creating the work page - part 9

More from this blog

Creating the blog page

Thank you for reading, and let's connect!