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 frontend 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.
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
Add the following scripts to your package.json
https://gist.github.com/f19a6acbedc1ae9aabe6aaec9213b04e
Then create an index.js file inside of a pages folder in the root
https://gist.github.com/cb171b698155d4b498f09fd4518e2db0
Then you can just run yarn dev and you should be up and running on localhost:3000. Hot reloading is baked in by default, which you can peek at if you inspect the .next folder in your root directory.
Next up we'll configure styled-components to style our blog.
First run yarn add styled-components.
Then create a custom _document.js file in the root with the following:
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.
Now let's create a main layout which all of our blog views will use, put the following in layouts/Main.js:
https://gist.github.com/dbca653f21ec41b05c37c1a892d9b9a9
We'll use this layout to wrap our pages, which can override the <Head> tags and render content into the { children } block.
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:
https://gist.github.com/6a34a5974ab19dac5edaa4abfc98d18b
The key here is the getInitialProps on our IndexPage component, which fetches all of the required data needed for this page to render. When this page is accessed directly at localhost:3000, Next will take care of fetching the data before the page is rendered. If we're navigating to this page from another one, no additional page reloads will happen, Next's clientside routing will take over and fetch the data for us before rendering the component thanks to the Link component. You can even add the prefetch property to tell Next to prefetch that page for blazing fast page loads.
Now 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:
https://gist.github.com/84079774012a57996c88e1dbfc93bb58
When you reload the page you should see a list of posts getting rendered by our index page like so (you can see the styles in the github repo https://github.com/timberio/next-go/).
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:
https://gist.github.com/ac007ec9e39d6f54f42bc3f6bf01f92b
This page is reponsible for fetching and rendering individual posts, so let's add a route to show it. We'll be using next-routes for some nice expressive route definitions, so simply run:
yarn add next-routes
and add a routes.js folder in the root with the following:
https://gist.github.com/e57cc73dbf6e53ef5edce9828818c1e1
Then make sure to add this middleware in ./server.js
https://gist.github.com/883bc13c1fe984eb5d84c58482a12372
Now our <Link route='post' params={{ slug: post.title }}> components in pages/index.js will map to this page with the proper params and if you click on one you should see something like this:
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/.