The Next Next

Today’s issue: Expo never sleeps, Practical-ish Elegance, and life lessons from Daniel Tiger.

Welcome to #165

---

The Next Next

Last October, Next.js 13 introduced its new app Router which featured a brand new, revolutionary approach to routing and layouts… for everyone who had never used Remix before 😉.

The router came with support for React Server Components, Layouts, Streaming, and Suspense for Data Fetching — which prompted React Core Team member (and recent Vercel hire), Andrew Clark, to christen Next 13 as “the real React 18 release.”

Fast forward to today, and the app Router is still in beta (while the Remix team still doesn’t like being copied). But last week’s Next 13.2 release introduced a bunch of new improvements aimed at getting app ready for prime time.

Here are the highlights:

• New Metadata API gives the app router better SEO support by letting you set static and dynamic meta tags with an explicit metadata configuration.

• Route Handlers let you create custom request handlers for a given route, via the Web’s Request and Response APIs. This is an updated, modernized version of the API routes that are deeply integrated into app.

• Next.js Cache (beta) is an evolution of Incremental Static Regeneration which unlocks progressive ISR at the component level. This builds on React Server Components and the colocated data fetching in the app router.

• Statically Typed links (beta) improves type safety when navigating between pages in the app directory.

Bottom Line: Last we tried, Next’s app directory still had some rough edges, but we’re happy to see some progress.

---

Secureframe keeps you out of jail

Everybody procrastinates. Why else do you think I’m furiously typing this at 3:00 am with enough caffeine in my blood to knock out a horse?

But if there’s one thing you shouldn’t put off any longer, it’s setting up all the security and compliance stuff for your site — for obvious reasons. Thankfully, Secureframe can help.

They figured out how to automate the entire compliance process for tons of security frameworks — like SOC 2, HIPAA, ISO 27001, PCI, and GDPR. Their platform has helped thousands of companies save months of time up front, and easily maintain compliance as they scale.

Best of all, they give you guided support from real, in-house experts every step of the way. So you don’t have to have stress dreams about being thrown in jail for screwing something up.

Set up a free, personalized demo to get a quick compliance check-up.

---

Have a job you want to fill?

---

Why does this code work?

const friends = ['Alex', 'Ben', 'Lynn']
friends.hasOwnProperty('push') // false

Specifically, why does friends.hasOwnProperty('push') work even though friends doesn’t have a hasOwnProperty property and neither does Array.prototype?

---

1. DevTwitter has been a little aggressive lately, so as a reminder, here are our two favorite (first, second) videos for keeping perspective.

2. Bun has docs now.

3. CarbonQA provides QA services for dev teams, so you’ll never have to do it yourself again. They work in your tools, talk with your team on Slack, and let your devs be devs — so you never have to waste engineering time on testing again 🙏. [sponsored]

4. CS classes teach you all about advanced topics within CS, from operating systems to machine learning, but there’s one critical subject that’s rarely covered: proficiency with tools. The Missing Semester of Your CS Education is a free resource that aims to fix that.

5. Alex MacArthur wrote about More Elegant Destructuring with JavaScript Generators, which he describes as “practical-ish.” What a coincidence, Practical-ish Elegance is the working title of my memoir.

6. ReacTree is a VS Code extension that lets you easily view your React components in a hierarchical tree.

7. Expo 48 just launched with some cool new features like Expo Image and Expo Router. And just to prove that sleep is overrated, Evan Bacon also made this video about what it might look like for Expo to add React Server Components to iOS and Android.

8. TanStack Bling is a set of framework-agnostic transpilation utilities for client/server RPCs, env isolation, funcsharding, islands, module splitting, and more. OK one of those words I made up.

---

const friends = ['Alex', 'Ben', 'Lynn']
friends.hasOwnProperty('push') // false

As mentioned earlier, if you look at Array.prototype, it doesn’t have a hasOwnProperty method. How then, does the friends array have access to hasOwnProperty?

The reason is because the Array class extends the Object class. So when the JavaScript interpreter sees that friends doesn’t have a hasOwnProperty property, it checks if Array.prototype does. When Array.prototype doesn’t, it checks if Object.prototype does, it does, then it invokes it.

const friends = ['Alex', 'Ben', 'Lynn']

console.log(Object.prototype)
/*
   constructor: ƒ Object()
   hasOwnProperty: ƒ hasOwnProperty()
   isPrototypeOf: ƒ isPrototypeOf()
   propertyIsEnumerable: ƒ propertyIsEnumerable()
   toLocaleString: ƒ toLocaleString()
   toString: ƒ toString()
   valueOf: ƒ valueOf()
*/

friends instanceof Array // true
friends instanceof Object // true

friends.hasOwnProperty('push') // false