Next.js 13 comes with a new TypeScript plugin.
We're bringing in-context docs right into your editor and helping surface errors before you even hit save.
Excellent work by the illustrious
@shuding_
✨
We've updated the Next.js Layouts RFC. Here's a summary of the new proposed features.
1️⃣ New optional files that make it easy to add nested loading and error UI. We expect most of your app will use `page.js` and `layout.js`, but you can reach for these other files if needed.
Today, 4 years ago, I made my first contribution to the
@Nextjs
docs:
Now I'm building the new docs 🤯 🫠
We migrated to App Router, addressed 1k+ comments, and created a new diagram system. Here are the tools we used, but first, Server Components:
The
@nextjs
team has been quietly rebuilding the foundation of Next.js using Server Components, Suspense, Streaming, etc.
These changes affect features across the board so we're taking the opportunity to work on a new structure for the docs ✨
Here's an early preview:
We've just released the first iteration of the Next.js Testing Docs: 🧪
We wanted to provide a starting point for those looking to set up Next.js with 3 commonly used testing tools:
@cypress_io
,
@fbjest
and React
@TestingLib
.
React tip: "use client" misconceptions (1/5)
🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component.
✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle.…
TIL you can toggle Suspense boundaries in React Dev Tools for easy debugging.
Useful for making sure your loading skeletons line up with your real content.
h/t
@sebmarkbage
✌️
We added a new section in the Next.js Docs: Caching
↳
Here's the TLDR for those who want a better understanding of the different caching layers and how they relate to Server Components and newer APIs:
New in Next.js: File-based Metadata API
1. Drop an Icon or OG image into `/app` and Next.js will auto-generate robot-friendly metadata for you.
2. Generate image, robots, sitemap, and manifest files using type-safe APIs.
I'm challenging myself to recreate UI elements from around the web as a way to learn new things and keep fresh. 🍋
Here's a wip thread on what I've been building, using and learning:
🏗️ Base stack:
• Next.js
•
@TailwindCSS
• PostgreSQL and
@Prisma
We've released an early iteration of the
@nextjs
learn course. Build a full-stack dashboard app while learning about the main features of Next.js 14 and the App Router.
Enjoy! :)
On Monday, we released part 1 of the Next.js Routing and Layouts RFC.
Here are some small design details I'm most excited about:
1. The `root` layout replaces the need for custom `_app` and `_document` files. Reducing complexity.
Quick video of how I used a webhook and the new Next.js 12.1 on-demand revalidation to instantly regenerate¹ a static page and push the resulting static files to the edge.
¹ Without having to rebuild my entire site or having to wait for a set revalidation interval.
New Next.js e-commerce template by
@blazity
:
◆ Built with
@v0
,
@shadcn
UI, and
@turborepo
◆ AI (search, image captioning)
◆ Enterprise-ready (A/B testing, scalable redirects, tests, etc)
◆ And more
Try it out: `npm create commerce`
Seb was right. We should've called pages: "pagelet.js" 🐷😂
In Next.js, you can place shared UI inside `layout.js`. Layouts don't re-render on navigation, which reduces work on the server and the response size. But, this poses a challenge for UI that depends on URL changes.…
Context Providers/Consumers can have a Server component "between" them.
Count is kept across navigation because the root Layout doesn't re-render.
Layout (s)
Provider (c)
Button (c)
Layout (s)
Count (c)
Page (s)
Count (c)
React tip: "use client" misconceptions (2/5)
🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components."
✅ We can pass the rendered result of Server Components to Client Components as props.
Simple example:…
Just published: How I Built My Site with Next.js.
Since working on it helped me find a job, I wanted to share an overview of:
◆ The stack I used
◆ Resources I found valuable
◆ My design and content decisions
Hope it's helpful! ✌️
Happy to share I've been promoted to a Senior Developer Advocate 🥳
I wrote some thoughts on the last few months:
◆ My journey into DevRel
◆ How to break into DevRel
◆ What it's like working at Vercel
◆ Lessons from the last six months
◆ What’s next
React tip: "use client" misconceptions (3/5)
🚫 "Client Components are never rendered on the server"
✅ Client Components are prerendered to HTML on the server when a user first visits a site.
Let's discuss why.
---
If client-side JavaScript is responsible for rendering…
Some news, I'm joining the incredible team at
@vercel
🖤
Vercel is a company I've admired since I started coding and who made it easy to launch my very first projects to the web.
Excited to be a part of Next.js & Vercel community and looking forward to working with you all!
The DevRel team at
@vercel
is growing...
Extremely excited to welcome
@delba_oliveira
to the team! She's an incredible engineer & educator and will be helping grow the Vercel & Next.js communities.
Welcome,
@delba_oliveira
! 🎉
😍 New `app/*/route.js` vs `pages/api/*`
◆ Colocate endpoints anywhere in nested routes
◆ Convenient HTTP verb API - GET, POST, etc
◆ Full dynamic spectrum - static/dynamic/revalidate (ISR) and even streaming
I had the privilege of chatting with
@acdlite
and
@sebmarkbage
about React's latest features: Suspense, Streaming, Server Components, and Server Actions.
We discussed what they are, how they fit together, and what the future of React might look like.
↳
Days 83-87 • Been playing with
@MaterialUI
to style my conversion tool. Also made a digital JavaScript mindmap of the things I’m learning, because my paper one was becoming too hard to edit.
🙃
#100daysofcode
#codenewbie
#womenwhocode
Hey, new Developer Advocate here. 👋 I'm curious to know...
1. Who are some exceptional people working in DevRel?
2. What companies are doing DevRel really well?
3. If you work in DevRel, what advice would you give someone starting out?
It's been two weeks since we released the new Next.js course.
Grateful to the 2,000+ folks who took the time to provide actionable feedback. It will significantly improve the experience for the next round of learners 🙏
Stream from the last three days:
📽️ Progress Report
To explain how Partial Prerendering works, it helps to explain the concept of React Boundaries.
Here is an attempt at explaining Error Boundaries.
The Next.js TypeScript plugin is becoming sentient 🤖
It recognizes valid and invalid props to Layout components, including the new parallel routes
@folder
convention.
tanstack-query is a best-in-class data fetching solution. It was invented just after the architecture that allowed it (hooks) was introduced.
Something to consider when we look at today's React server features. First, the architecture has to allow it, then, the ecosystem cooks.
📑 Next.js Docs: The different ways you can redirect in your app, and use cases.
Includes an example of how to manage thousands of redirects for large-scale applications.
⬩Docs:
⬩Demo:
⬩Example:
Shipped a nifty
@Github
action for the Next.js Docs - a broken link detector 🔎
After a few days of painfully fixing broken links 💀 I wrote a script that would prevent site builds if broken links were found 😈 But, for better DX, it now alerts you on the PR 😇
View Transitions are really cool 🤩
I think it'd be a nice addition to the sidebar of doc sites that use Astro. Amazing ship by the Astro team 👏
Check out this implementation by
@joebell_
Lately, I've been thinking about how we, as frontend developers, are perfectly positioned to create more effective learning experiences through "interactive playgrounds".
What are some of the absolute best interactive articles and docs you've seen around the web?
I'll start 🧵
Next.js Update
Our top priorities for the next couple of months:
※ Improving Local, Build, and Production Performance
※ Polishing bugs and unexpected behavior
※ Developer Education on new Next.js and React features
↳
Next.js has a built-in configuration for Jest now!
◆ Auto-mocking of .(s)css/.module.(s)css and image imports
◆ Transform using SWC
◆ Loads .env variants
◆ Ignores node_modules for transforms / test resolving
Available as experimental on canary:
gm.
My
#nextjsconf
talks on Getting Started with React and Next.js are up.
I tried to make them approachable by building on concepts step-by-step as we go from plain JavaScript to React to Next.js 🐣
JS → React:
React → Next:
Next.js Cache is bringing ISR to the component level.
Gen 1 - Decide between static and dynamic per app.
Gen 2 - Decide per page.
Gen 3 - Decide per fetch.
It's not either/or – it's a dynamic spectrum 🪄💫
We updated the Next.js Foundations course to include the App Router and Server Components.
Great for those who are new to React or just want a refresher 😊
Last week (an eternity ago), we announced some Next.js updates.
◆ App Router: Beta → Stable
◆ Turbopack: Alpha → Beta
◆ React Server Actions in Next.js: 💡 → Alpha
Plus, we managed to capture a
@nutlope
in its natural habitat: shipping viral AI projects.
"use client" is a bundling feature not specific to React Components.
For example, `abc` is a simple numeric value defined in a client module and imported into a server module.
What do we expect `abc` to log in each environment?
So,
@vercel
reverted all edge rendering back to Node.js 😬
Wanted to correct the record here as it's something I've advocated for in the past, and share what I've learned since then.
Also, the "edge" naming has been a bit confusing, so let's clear that up here as well.
What is…
When we started rewriting the Next.js docs, we couldn't imagine 2̶0̶0̶0̶ 3,000+ of you would be there to give feedback 🙏
So far, you've helped us find typos and bad links, answered each other's questions, and helped us identify "hot zones" that need more clarity. Thank you!
We enabled public comments for the Next.js app directory docs (beta).
2,286 have contributed feedback so far. Learn how to enable collaboration on your UI.
A lot of work has been happening behind the scenes for
#nextjsconf
. Really excited about what we're going to be sharing!
If you're new to React and/or Next, you won't want to miss it 😉
Grab your ticket and join me on October 26! 👇
My first video is out:
How I Built the Portfolio That Helped Me Land a Developer Role.
—
In the last few days, I've been learning how to use lights, mics, edit videos... and be comfortable in front of the camera.
It's been intense but extremely fun 🚀
Monumental Sunday project: Updated my favicon 💪💪💪
Depending on your sites style, it might be cool to add a teeny weeny bit of character to your favicon by using this¹ Figma plugin to create a Squircle.
Good news everyone! I'll be speaking at React Conf 2021 💙
Honored to be part of this event and looking forward to hearing from all the other speakers. Grab your tickets 👇
5️⃣ Finishing touches
Hide the overlay while it's positioned outside the skeleton.
(Optional) Add a white border to the top of the overlay to simulate light reflecting on the top of the skeleton.
Code:
New video: My Story + How I Became a Developer 👩🏻💻
—
How I dropped out of med school, left home and moved countries at 18, and eventually learned to code. It spans 3 countries and a decade, there were some detours but I eventually found my career path ☺️
TIL you can toggle Suspense boundaries in React Dev Tools for easy debugging.
Useful for making sure your loading skeletons line up with your real content.
h/t
@sebmarkbage
✌️
Next.js 13 and Server Components introduce a new model for building web applications. It allows you to combine the rich interactivity of client-side apps with the improved performance of server rendering. Try it out today:
We're working on documentation and demos that help explain these new concepts and their possibilities.
As always, features will be incrementally adoptable, and backwards compatible.
Read more in the RFC: .
Peek under the hood of Next.js with
@samselikoff
and
@timneutkens
◇ Rendering Server Components
◇ Composition vs. top-down data flow
◇ Caching layers
◇ Revalidation
◇ After user events
◇ After server-side changes
◇ Back/forward navigation
↳
Some thoughts on the ongoing "use client" naming is bad conversation.
IMO, the root problem is the general misconception around the term Server Side Rendering (SSR) in React apps.
This naming paints SSR as an alternative to CSR when, in reality, it is an optional step to show…
01: Inspired by
@Vercel
's iconic "Develop. Preview. Ship" hero text. I recreated a component that takes a set of given words and animates them line by line.
Last week we shared our focus on performance. Here is the first update of that effort. More soon.
Try upgrading and let us know 🙏
🥂 to the Next.js team
Next.js 13.4.8 includes improvements for compiler performance and various bug fixes.
On Vercel.com, this led to 1.5x faster local server startup and 54% faster updates when making changes (HMR / React Fast Refresh).
Here are the changes we've made to improve performance ↓
◆…
@lukemorales
It's beautiful 😍 You forgot loading and not-found though.
In all seriousness, you will not use every special file at every level. E.g. layout + page in leaves is redundant, templates will be rare, and most routes do not need error/loading boundaries at that level of granularity
It's great news for the React Ecosystem to see both
@remix_run
¹ and
@redwoodjs
² exploring React Server Components.
We'll all benefit from seeing Redwood's laser-focused take and having the best educators in the industry address the topic.
Turbopack is getting close to beta!
We're nearly done with Next.js features and focusing on stability. We've also been investing in features to aid adoption, like supporting webpack loaders.
Try it out and let us know your feedback!
Making diagrams for
Husband walks in: "Maybe save the trees and use
@Figma
?" 😅🌳
But seriously, what are some web concepts you hear us talking about in
@nextjs
that you'd like explained?
"Compiling", "code splitting", "edge" - no answer is too simple.
Spent some time this weekend playing around with
@figmadesign
to create slides for a talk. Components and auto layout make up for a lack of native presentation features.
Anyway, here are some plugins I found useful:
1. Quickly create mesh gradients:
My
#nextjsconf
swag arrived 🤩 I was excited about this drop because all proceeds are going to
@WomenWhoCode
.
Got yours? Would love to see your flex pics. And thank you for supporting
#womenwhocode
🙏