MTV Cribs - Next.js Edition

Issue #20.November 2, 2020.2 Minute read.
Bytes

After much deliberation we’re excited to announce our favorite Halloween costumes this year. First place goes to Jack dressed up as Rasputin and Second place goes to Guillermo dressed up as an Apple exec. Speaking of Apple execs…

Next.js 10.0 Released

Steve Jobs

Steve Jobs giving the keynote at Next.js Conf 1989

Next.js turned 4 years old last week… and celebrated by releasing a feature-packed v10 at Next.js Conf. This release also gave us a good look at some new ways Vercel (Next’s parent co.) plans to make money — which is pretty important considering they’ve raised some bookoo bucks ($21m or .77 of a famo.us to be exact).

There’s a lot to unpack here, so let’s get to the highlights.

  • New Image Component: Next.js worked with the Google Chrome Team to make the next/image component, which they describe as a “drop-in replacement for the HTML <img> element, evolved for the modern web.” This component automatically handles lazy loading, pre-loading of images, and correct sizing across devices.

  • Automatic Image Optimization: This lets Next.js serve images in modern formats like WebP, which is 30% smaller than JPEG. Best of all, it optimizes images on demand (as users request them), instead of at build time. In their words — “Unlike static-only solutions, your build times won’t go up, whether you’re shipping 10 images or 10 million images.” – ”@ me next time - Gatsby”

  • Internationalized Routing: Next.js 10 provides built-in support for internationalized routing and language detection, which should make internationalizing your projects a lot more automatic and a lot less painful. Hopefully, this makes it easier to build internationalized apps the way that Mr. Worldwide himself would approve of.

  • Next.js Analytics: A new product (you have to pay for it) that tracks performance metrics continuously from the actual devices of your visitors. Every time you deploy, it automatically gives you a real-time performance score (as opposed to Lighthouse, which you have to run yourself).

  • Next.js Commerce: An “all-in-one starter kit for ecommerce sites” that was built with Tailwind and in collaboration with BigCommerce. It seems pretty easy to customize and promises to integrate with Shopify and others soon. Every page comes preset with the right SEO configuration and the data layer is already standardized for ecommerce.

For more details on Next 10, check out Guillermo Rauch’s Next.js Conf keynote from last week. It’s the first keynote we’ve ever watched that also felt like an episode of MTV Cribs.

The Bottom Line

Is Vercel trying to become the Amazon of web development? You started out selling books (server-side rendering), and now you’re trying to sell me on… a Nicholas Cage rainbow pillowcase (an analytics platform)??

Well, it definitely worked out for Amazon. And Next.js’s monetization strategies seem like they’ll also add some real value while still allowing Vercel to create and maintain some great open-source projects.

Reactime - A Time Travel Tool for State Debugging

Uncle Rico

I used to be able to throw a pigskin a quarter mile

Reactime is an open-source Chrome extension that’s trying to make state debugging a little easier for React devs. It tracks and visualizes state changes and lets you “time travel” to previous states in your React app.

It does this by taking a snapshot every time your app’s state changes, and it renders those snapshots into a visual hierarchy you can click through (or get in JSON format). Snapshots can also be diffed with the previous snapshot.

Under the hood: Reactime uses the React Fiber tree to access your app’s data. From there, it “traverses the Fiber nodes with a recursive, depth-first search algorithm” to extract all the meaningful data. Then, it shapes that data to fit the data structures of D3 and VISX, the libraries providing the visualization muscle.

Reactime works if you’re using stateful components and prop drilling, and it recently opened up beta support for Hooks, Recoil, Context API, conditional state routing, and functional components.

Reactime got on our radar last week after they released v6.0. For more info, you can check out the creator’s full blog post.

We’re here for anything that makes state management more manageable.

Cool Bits

  1. Last week, Alex (of ui.dev fame) did a 1-hour live stream on the new React server generated framework, Remix. Does it live up to the hype and the (literal) price tag? Watch to find out.

  2. Felix wrote a great, in-depth article explaining memory management in JavaScript. If only he could help me manage to get the memories of this Halloween out of my head.

  3. Recoil (Facebook’s new state management library) released v0.1.1 last week,. A rare bright moment for the company during election season.

  4. Rough Charts is a responsive, composable react charting library with a hand-drawn style. Perfect for visualizing what percentage of your calories came explicitly from candy corn last weekend.

  5. Ania made an hour-long video tutorial on building Doodle Jump from scratch with pure JavaScript, HTML, and CSS.. She’s funny, and we like funny.

  6. Jamie Coulter released “The Caretaker” - a pure CSS horror puzzle game with… no JavaScript?! That really is some dark magic 🧙‍♂️.

  7. Tom MacWright wrote about some Alternatives to SPAs (Single-Page Apps). Reminds us of this spicy Tweet from Michael Jackson.

  8. Tyler wrote (and recorded?) about Code splitting with React, React.lazy, and React Router v5 to help you increase the performance of your React apps.

JS Tip

Last week we asked if you preferred more long form posts or shorter, “spot the bug” type posts. Naturally, feedback was 50/50 so we’ll keep mixing it up.

NPM dependencies vs devDependencies

tl;dr

dependencies are required by your application at runtime. Packages like react, redux, and lodash are all examples of dependencies. devDependencies are only required to develop and or build your application. Packages like babel, enzyme, and prettier are examples of devDependencies.

npm install

The actual difference between dependencies and devDependencies are seen when you run npm install.

If you run npm install from a directory that contains a package.json file (which you typically do after you clone a project, for example).

✅ All of the packages located in dependencies will be installed ✅ All of the packages located in devDependencies will be installed

If you run npm install <package-name> (which you typically do when you want to add a new package to your existing project), i.e. npm install react.

✅ All of the packages located in dependencies will be installed ❌ None of the packages located in devDependencies will be installed

Transitive Dependencies

If package A depends on package B and package B depends on C, then package C is a transitive dependency to Package A. What that means is that in order for Package A to run properly, it needs Package B installed. However, in order for Package B to run properly, it needs package C installed. Why do I bring this up? Well dependencies and devDependencies treat transitive dependencies differently as well. When you npm install from a directory that contains a package.json file,

dependencies - ✅ Downloads all transitive dependencies. devDependencies - ❌ Doesn’t download any transitive dependencies.

Specifying dependencies vs devDependencies

As of NPM 5, when you run npm install <package-name>, that package is automatically going to be saved inside of your dependencies in your package.json file. If you wanted to specify that the specific package should be included in devDependencies instead, you’d append the --save-dev flag.

npm install prettier --save-dev

Installing on a production server

Often times you’ll need to install your project on a production server. When you do that, you don’t want to install devDependencies since you obviously won’t be needing them on your production server. To install only the dependencies (and not devDependencies), you can use the --production flag.

npm install --production