From Scratch: using Next.js (React), Bulma & Zeit Now
(written in April, posted in august, some stuff might be out of date)
I’m new to front-end. Part of the fun is figuring out small projects to discover new tricks. The later fun comes from showing what I found out in case anyone else wanted to try the same things. This guide uses Next.js (it’s basically react) to build the frontend & backend, we’ll style the app with Bulma, and host it with Zeit Now (hiding our API key so no one hacks us).
For this project, I’m turning my youtube playlist of drone videos to render a gallery on my website dean.red.
Pre-requisites
- Node.js
- Signup with Zeit Now and download their CLI
Getting Started
Let’s get the installation & configuration out of the way first. Let’s start by creating the next.js skeleton.
npx create-next-app
Now let’s install the node_modules we’ll be using:
npm i node-sass bulma dotenv axios
Installing Styling (Bulma)
Let’s setup the styling with node-sass & bulma. Open your package.json configuration file and copy/paste the scripts for css:build & css:watch:
// package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"css:build": "node-sass --omit-source-map-url assets/sass/styles.scss static/css/styles.css",
"css:watch": "npm run css:build -- --watch"
}
This script will turn a .SCSS file into a static CSS file. To do this, we need to create the .SCSS file.
In the folder root, create a new folder called assets, then create a sub-folder called sass, then inside this folder create a file called styles.scss
Now we can load bulma into styles.scss with the following code:
// assets/styles/styles.scss
@charset "utf-8";
@import '../../node_modules/bulma/bulma.sass';
Next, we’ll build the static .CSS file with styles.scss. In the terminal:
npm run css:build
This creates a folder called static with the styles.css nested inside.
Now we can use this styling inside our app. To do so, let’s create a Head component that we can use inside all our pages consistently. Create the file TheHead.js inside the components folder:
// components/TheHead.js
import Head from 'next/head'
export default () => (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
<title>youtube playlist</title>
<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />
</Head>
)
#nextjs #webdev
