Build a design inspiration board with Next.js

I share a lot of links with the teams I‘ve been a part of — it’s one of the ways I stay connected with them. More importantly I get a lot of satisfaction out of it; sharing a tool that makes someone’s job more enjoyable and/or interesting is rad. I felt like it would be worthwhile to keep a public area where I could share all my design inspiration and useful web tidbits I’ve collected. Usually I’ll tweet these out, but I also saw this as an opportunity to test out Next.js. Here I’m going to walk you through building a design inspiration board using this framework. Example: https://design.af , source Why use Next.js Next.JS is a high performing server-side rendered node app that has the simplicity of without the performance issues_._ Often, its used in combination with React, but it is infinitely pluggable; you can configure as much or as little as you wish (like Sass…or Redux), and the documentation to do so is extensive. It has a ton of performance optimizations built in meaning that you can think less about set up. Meteor Buzzwords. Buzzwords everywhere. Getting started We’re going to create a single page app that fetches data from a Dropmark feed and use that to display a grid of images. This data is a JSON response from an API endpoint at Dropmark. What we need is something to help us easily fetch the data, sort it, and display it. We will use a public feed on mine for now, and I’ll take you through the steps needed to use your own private boards later. Create a new directory and install the dependencies for this project: mkdir design-inspocd design-inspo yarn init yarn install next moment react react-dom isomorphic-fetch What do all of these do? handles the node parts and all our assets (styles, js) . Next Read more here handles the time calculations so we can show when we posted something. Moment and help us with the interface so we can display it with fancy HTML. Realistically we could use any JS front end framework or even nothing at all. Frameworkless is a bit trickier though for our example. React React-dom helps us sort data, its an alternative to Lodash and Underscore. Ramda Add our start script to your file package.json {"scripts":{"dev": "next"}} Creating the folder layout and initial `index.js` file We need a folder per the Next API. Run the following in your command line: . We’re going to use our file as a wrapping component that fetches all of our data and passes it to smaller components. pages/ mkdir pages && touch pages/index.js index.js We’re going to use the endpoint for my feed from . I have this public so that we can use it for the example but later on I’ll break down how we can use environment variables for private boards. Web Dropmark Here’s what we need in that file: index.js To summarize this, we’re asynchronously “fetch”-ing data from the Dropmark endpoint ( ). When the request is complete, we return which are the part of the json object. This is then passed into our component. http://twnsndco.dropmark.com/396720.json data items data Feed Componentize me Cap’n Let’s tackle our smaller components. Create a folder and a new file in it called . This component will pull in our data to to a smaller component, which we will create later. /component Feed.js map Post Our file: Feed.js We’re passing in 2 arguments to this : and . We’ll likely use className in order to style the container for all of our . is our JSON object that the component is receiving from our component (the index.js file). With , an array, we can each object to a component. functional component className posts posts Data Feed index data map post Post The Post: Let’s see some stuff Create a file in your folder. We’re going to unwrap the object that it receives from and use that to populate a bunch of HTML elements. Post.js components post Feed Styling it up To test out our app, run and open in your browser. You should see an un-styled stream of images and text. With Next.js you get hot module reloading out of the box, which means instant visual feedback. npm run dev localhost:3000 Since you’re the designer, I won’t tell you how to style this; you have all the raw ingredients now to make your design board. I would recommend setting up (easy to use, nice ro write) or (easy to use, performant). [styled-components](https://github.com/zeit/next.js/blob/master/examples/with-styled-components) [cxs](https://github.com/zeit/next.js/blob/master/examples/with-cxs) Making it your own feed To make your own feed, create an account at . Create a new collection for what you want to be sharing. All of your posts will be there. Dropmark.com At the far left in the sidebar you can see “New Collection” First, I’d add a couple items to this collection. Download and set up the Dropmark chrome/safari extension or their mac application. Usually with websites I take a screenshot, which essentially gets you the front page of the site. Open up your new collection by clicking the title in the sidebar head to that collection’s board. Copy down the URL from your browser. Usually it is something like Then head to the account settings underneath your avatar on the far right. Scroll down to private links and get/generate your private key. yourusername.dropmark.com/102333 Copy this key down as well. At the root of your project folder, create a file with the key where the instead of X’s you have your key. Then add another file to the root, called with the following content: .env DROPMARK_API_KEY=XXXXXXXXXXX now.json {"dotenv": true} This lets know that you have included a file and need access to the token there. Now .env Head to your file and change it to use your new collection url and your Dropmark key. Here we’re using a string template to insert our key before generating the string. index.js import React from 'react';import 'isomorphic-fetch'; const postEndpoint = `http:// .dropmark.com/ .json?key=${process.env.DROPMARK_KEY}` Spin up your project again using and you should now see a list with the images/sites you’ve added so far. npm run dev Deploying To deploy a copy, globally install with and run from the root of your project folder to deploy it to a temporary URL. For custom urls, consult . now npm install -g now now --dotenv https://zeit.co/now Questions? Build something awesome? Reach out to me on twitter , I’d be more than happy to help out or point you towards helpful documentation. @twnsndco