Creating Minimalistic Developer Blog in Nextjs

NextJS is a popular ReactJS framework for creating websites. We will start by creating a directory and install required dependencies.

Prerequisite: A basic knowledge of es6, npm and react is required and NodeJS must be installed to proceed further

Installing dependencies

Open your terminal and following commands for initial setup:

mkdir new-blog && cd new-blog
npm init -y
npm install --save next react react-dom @mdx-js/loader @mdx-js/react @next/mdx prism-react-renderer

At the time of writing, I have following version for these deps [email protected], [email protected]

Writting shortcut scripts

After running above commands, you should see a package.json file in your directory. This is the configuration file for our node application. We will put a scripts key in it with following content.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

These scripts will help us in running next binaries with ease i.e. instead of running ./node_modules/bin/next dev, we can simply run npm run dev. All of these scripts can be execuated as npm run [script_name].

Writting the Home Page

Create a pages directory in the new-blog directory. Now create a new file index.jsx with the following content. This will become our home page where we show our personal info and a list of blogs.

import React from 'react'
import Link from 'next/link'
export default function HomePage() {
  return (
    <div>
      <p>Hi, This is [me]. Here is something you might be interested in.</p>
      <Link href="/blogs/hello-world">
        <a>Hello World! First Blog</a>
      </Link>
    </div>
  )
}

Previewing our Home Page

To view our blogs locally, we will start a local development server by running npm run dev from the command line. This command must be execuated from the root of our directory new-blog. You will get a url in the terminal logs. Open it in your preferred browser and your should see our home page with a link to our first blog.

Assuming that you are currently in new-blog directory:

npm run dev

On my machine, it showed a url http://localhost:3000. Open it in the browser and you should see our home page. The link to blog wont work yet as we have to write it first.

Setup Markdown

Configure Nextjs to use @next/mdx

Back to our project, create a next.config.js file in the new-blog directory with the following content:

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
})

Handle markdown files in application

Create a new file named _app.jsx in the pages directory with the following content. This is the container component of our application.

import React from 'react'
import NextApp from 'next/app'
import Link from 'next/link'
// this module provides the context for markdown
import { MDXProvider } from '@mdx-js/react'
// this modules provides the syntax highlighting for code snippets
import Highlight, { defaultProps } from 'prism-react-renderer'
// export the default App Component
export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    // the components are defined bellow
    return (
      <MDXProvider components={components}>
        <Component {...pageProps} />
      </MDXProvider>
    )
  }
}
/**
 * Here we define the components that markdown should use when rendering
 * a component e.g. what should the MDXProvider render when it encounters
 * a `code` element when processing our markdown file. We can provide all
 * the HTML elements e.g. `h1`, `h2`, `p`, `blockquote` etc.
 */
const components = {
  // this is a special key in the markdown that we can use to define
  // layout/container component for our markdown files
  // https://mdxjs.com/guides/wrapper-customization
  wrapper: ({ ...props }) => {
    // this is the layout component
    return (
      <main>
        <Link href="/">Back</Link>
        <div {...props} />
      </main>
    )
  },
  // this is highlight the code snippets
  // skip this if you dont want any highlighting
  // https://mdxjs.com/guides/syntax-highlighting#prism-react-renderer
  // you can add your custom styles overrides if you want using styled-jsx
  code: ({ className, children, language }) => {
    language = language || className.replace(/language-/, '')
    return (
      <>
        <Highlight {...defaultProps} code={children} language={language}>
          {({ className, style, tokens, getLineProps, getTokenProps }) => (
            <pre className={className} style={{ ...style }}>
              {tokens.map((line, i) => (
                <div key={i} {...getLineProps({ line, key: i })}>
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
                </div>
              ))}
            </pre>
          )}
        </Highlight>
        <style jsx global>{`
          .prism-code {
            padding: 1em;
          }
          pre {
            overflow: auto;
          }
        `}</style>
      </>
    )
  },
}

Writting our first post

We will store all our blogs in new-blog/pages/blogs directory. Create this blogs directoroy in pages folder. Now, let's write a post. We will create a file called hello-world.md in the pages/blogs directory with the following content.

Hi All,
This is me [name]. I have just started writting some posts. This is my first post.
Many to come along the way
```js
function hello() {
  return 'world!'
}
```

Previewing the Post

Now let's see it in the browser. First, we have to kill the currect running npm run dev command (if it is running) and run it again. We have to do this (kill and run again) for this time because we have changed the next.config.js file. Now we can let it keep running. Open the prompted link in the browser and click on the blogs link.

npm run dev