Next.js is an awesome new framework for building universal React applications. In simple terms, that means you can use React to render templates on the server, as well front-end components the way you’re most likely used to. The advantages of this are numerous (shared components, faster rendering, great tooling), but getting it all to work properly is generally a pain.
Next.js makes this process easy, and with the release of V3 I thought I’d whip up a blog to learn and demonstrate how it works. In this tutorial we’ll be using the following:
- next (3.X)
- styled-components (phenomenal css-in-js solution)
- next-routes (middleware for expressive routes in next)
- express (for serving our pages, although you can also do static exports)
I’d highly recommend you follow along with the github repo here https://github.com/timberio/next-go/, as some components are left out for the sake of brevity.
1. Getting Started
Getting set up is simple, you can follow along in the docs but the gist of it is to install next, react, and react-dom, add a simple build script and create your index file.yarn add next@beta react react-dom --save{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}// ./pages/index.js
export default () => (
<div>Welcome to next.js!</div>
)2. Adding Some Style
Next up we’ll configure styled-components to style our blog.First run
yarn add styled-components.https://gist.github.com/a8711187724db5ac96b4c4e391f245a5
The custom _document.js allows us to override the default page layout and inject our own styles and markup surrouding our react app.
3. Creating a Layout
Now let’s create a main layout which all of our blog views will use, put the following in layouts/Main.js:/* layouts/Main.js */
import Head from 'next/head'
import Wrapper from './Wrapper'
import Nav from 'components/Nav'
import Footer from 'components/Footer'
export default ({ children, title = 'This is the default title' }) => (
<Wrapper>
<Head>
<title>{ title }</title>
</Head>
<header>
<Nav />
</header>
<main>
{ children }
</main>
<Footer>
Footer
</Footer>
</Wrapper>
)4. Rendering Posts
Now that we have our layout set up, let’s modify our index.js page to take advantage of it, and also render some posts.Update pages/index.js with the following:
import React from 'react'
import Layout from 'layouts/Main';
import { getPosts } from 'api/posts'
import { Link } from 'routes'
import Post from 'components/Post'
const IndexPage = ({ posts }) => (
<Layout>
<ul>
{posts.map(p => (
<Post key={p.title} post={p} />
))}
</ul>
</Layout>
)
IndexPage.getInitialProps = async ({ req }) => {
const res = await getPosts()
const json = await res.json()
return { posts: json }
}
export default IndexPageNow we’ll use some sample json and place the api in api/posts/index.js:
undefined
And add our Post component in components/Post/index.js:
import React from 'react'
import { Link } from 'routes'
import Wrapper from './Wrapper'
const PostItem = ({ post }) => (
<Wrapper>
<Link route='post' params={{ slug: post.title }}>
<a>
<h3>{post.title}</h3>
<p>{post.body}</p>
</a>
</Link>
</Wrapper>
)
export default PostItem5. Post Pages
Now that we have a list of posts, lets add a route to view each individual post. Create a new page in pages/Post.js like so:import React from 'react'
import Link from 'next/link'
import styled from 'styled-components'
import Layout from 'layouts/Main';
import { getPost } from 'api/posts'
const PostPage = ({ post }) => (
<Layout>
<h1>{post.title}</h1>
<p>{post.body}</p>
</Layout>
)
PostPage.getInitialProps = async ({ query }) => {
const res = await getPost(query.slug)
const json = await res.json()
return { post: json[0] }
}
export default PostPageyarn add next-routesconst nextRoutes = require('next-routes')
const routes = module.exports = nextRoutes()
routes.add('index', '/')
routes.add('post', '/blog/:slug')const express = require('express')
const next = require('next')
const routes = require('./routes')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const handler = routes.getRequestHandler(app)
app.prepare()
.then(() => {
const server = express()
server.use(handler)
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})That’s it! You can easily sub in your own endpoints in api/posts/index.js to fetch from your API or CMS of choice.
You can see a working demo at https://next-go.now.sh/ and view the code at https://github.com/timberio/next-go. You can also learn more about Next at https://learnnextjs.com/.
published at https://timber.io/blog/building-a-blog-with-next-js & https://medium.com/styled-components/building-a-blog-with-next-js-359cf1236574
