Creating Minimalistic Developer Blog in Nextjs
Table of Contents
Installing dependencies
Open your terminal and following commands for initial setup:
mkdir new-blog && cd new-blognpm init -ynpm 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 markdownimport { MDXProvider } from '@mdx-js/react'// this modules provides the syntax highlighting for code snippetsimport Highlight, { defaultProps } from 'prism-react-renderer'// export the default App Componentexport default class App extends NextApp {render() {const { Component, pageProps } = this.props// the components are defined bellowreturn (<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-customizationwrapper: ({ ...props }) => {// this is the layout componentreturn (<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-jsxcode: ({ 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```jsfunction 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