Skip to content
Swizec Teller - a geek with a hatswizec.com

Exploring NextJS with a headless CMS, pt4 – CodeWithSwiz

getStaticProps, environment vars, and why you shouldn't use yarn link – all in this episode of #CodeWithSwiz

CodeWithSwiz is a twice-a-week live show. Like a podcast with video and fun hacking. Focused on experiments. Join live Wednesdays and Sundays

This was a fantastic streaming session. The thing works! You can do what I've been trying to build for the past 3 episodes 🤘

Paste markdown into the new Markdown pasta 🍝 textarea and your article transforms into a full preview.

  • youtube links turn into thumbnails
  • tweets turn into screenshots
  • code goes through carbon.now.sh
  • twitter names turn into links
  • gifs are embedded

Check it out live on swiz-cms.vercel.app

Preview of markdown machinery

Cryptic error about React hooks
Cryptic error about React hooks

Much of our frustration budget was spent on this cryptic error. "Naughty naughty, calling hooks in a class component"

You get this error when using yarn link to develop libraries. Like when you have a piece of code you want to re-use in different projects.

Library development relies on a combination of unit testing and integrating with your target project. I skip unit testing on stream because lazy ✌️

You end up testing through integration.

Best way to do that is to yarn link (or npm link) a local project into your code. That way changes are reflected immediately.

And it leads to having multiple instances of React in the same project. One from your project, one from your library. Running instances in the browser that is. Happens with Vue too.

You have to publish your library for every change 😩

1. see bug
2. make change and pepper console logs
3. yarn build
4. git commit
5. npm version patch
6. npm publish
7. change to target project
8. yarn add library

For every change. Yeah it sucks. You learn to maximize debugging info for every change.

Environment variables

Environment variables are best used for configuring your API keys and other secrets. You shouldn't hardcode those and they shouldn't be part of your repository.

NextJS has fantastic support out of the box. We kinda guessed on stream and it worked 🤘

For local development, create a .env.local file. Do not add to git

// /.env.local
GIPHY_API_KEY=value

You can then read these variables on the server and during builds with process.env.GIPHY_API_KEY.

They're hidden from the browser for security reasons.

For production and preview secrets, you should use Vercel's or Netlify's UI. They keep secrets encrypted and out of your codebase. Like it should be.

Prod, preview, dev secrets in Vercel
Prod, preview, dev secrets in Vercel

getStaticProps

Having env vars on the server and inside builds is great, but our <LetterBuilder> plugin needed them in the browser.

You can expose public vars in NextJS by prefixing with NEXT_PUBLIC. I haven't tried if that works on Netlify.

Our API key isn't public though. It's a true secret and should stay secret. You can see it on my stream because I'm a terrible person. And because I can click a button to change it 😉

We used getStaticProps to read the key at build time and send it to our page as a React prop. This is insecure.

// /pages/index.js
export async function getStaticProps() {
return {
// populate props however you want
props: {
giphyAPIKey: process.env.GIPHY_API_KEY,
},
};
}
// ...
export default function Home({ giphyAPIKey }) {

When you export getStaticProps from your page, NextJS runs your method when building the page. Either for static rendering or their static generation magic.

Those props are then baked into the render of your exported default component.

Similar to Gatsby's staticQuery and useStaticQuery without the complication of GraphQL and far more flexible. You can use this method for anything you want. Even API requests.

Make sure your props are serializable JSON ✌️

Cheers,
~Swizec

Did you enjoy this article?

Published on September 10th, 2020 in CodeWithSwiz, Livecoding, Technical

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works 👇

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet 📖

Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their JS careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️