๐ฃ The Next.js router is getting a major upgrade!
โ Nested routes / layouts
โ Client and server routing
โ React 18 features โ startTransition, Suspense
โ Designed for Server Components
โ 100% incrementally adoptable ๐คฏ
Expect an RFC very soon ๐
The new React docs are out!
Well-written and practical, complete with interactive examples, diagrams, and more. Plus, they teach Hooks first.
Give them a read and provide feedback:
When there's competition in DevTools, developers win:
โ Svelte is pushing React
โ Remix is pushing Next.js
โ Prisma is pushing ORMs
โ Deno is pushing Node.js
โ Supabase is pushing Firebase
โ esbuild / SWC are pushing JS tooling
โ Bun is pushing SWC
What else?
I wrote a response to
@kentcdodds
's post "Why I Won't Use Next.js".
It started small, but ended up with a 3,000 word journey and some history about how Next.js has evolved.
Here's why I'm using Next.js.
My latest course on Next.js is now available free ๐
Learning Next.js will transform how you build web applications.
- Next.js / React
- Firebase
- Stripe / Vercel
- 15+ hours of content
RTs appreciated ๐
#100DaysOfCode
TypeScript 4.9 is going to be *huge* for
@nextjs
.
With the release of `satisfies`, you'll get improved type safety inside `getStaticProps`/`getStaticPaths`/`getServerSideProps` as well as inside Pages.
๐คฏ
Next.js is working on a new router, with support for nested layouts, colocated data fetching, and React Server Components.
I wrote up a quick overview of the upcoming changes. You'll be able to incrementally adopt these new features in a future release.
Next.js is a free open-source framework. The creators, Vercel, fund its development.
How is this possible? Why would they give it away for free? Let's talk about funding open-source software (OSS).
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โฆ
A 1-hour introduction to Next.js and React ๐ฅ
This mini course is designed for beginners, but if you've used Next.js before, hopefully you'll still pick up some new tips.
We'll build a quiz app using Postgres, starting from React basics and going all the way to Server Actions!
Good news!
@nextjs
now automatically restarts your local dev server when you make changes to `next.config.js`.
Available on `canary` and soon the next stable release ๐ฅ
How to get the fastest web fonts (Updated 2021)
1๏ธโฃ Use a variable font
2๏ธโฃ Preload your font file
3๏ธโฃ Self-host instead of Google Fonts
4๏ธโฃ Use `font-display: optional` to prevent layout shift
I just launched a new version of my site!
โ Next.js 13 + `app/` directory
โ MDX with React Server Components
โ Tailwind CSS for styling
โ Framer Motion for animations
โ PlanetScale + Auth.js
โ Vercel Analytics
Code โ
New post: Rust Is The Future of JavaScript Infrastructure ๐ฆ
Why is Rust being used to replace parts of the JavaScript web ecosystem like minification, transpilation, formatting, bundling, linting, and more?
We're working on improvements to
@nextjs
to make it easier to use custom web fonts while maintaining great performance.
Import the font in `_app`, add "Inter" to your `font-family`, and you're done. This only loads the specified variants and automatically subsets.
Thoughts?
Excited to announce I've been promoted to Head of Developer Relations at
@Vercel
๐
One more thing... I'm hiring!
If you want to join a high-growth startup, scale a community with millions of developers, and transform the way we build the web โ join me!
Tanner (
@tannerlinsley
) has made an incredible impact on the React ecosystem with libraries like React Query, React Table, and more.
To thank him for his amazing open-source work, we're flying him to San Francisco for Next.js Conf next week.
Thanks, Tanner!
Big news โ I'm joining the incredible team at โฒ
@Vercel
I'm thrilled to help grow the Next.js community and continue building the optimal workflow for front-end developers ๐ฅณ
Authentication in
@nextjs
with Server Components and Server Actions is so nice ๐ฅฐ
We're working on some updated docsย for auth โ what would you like to see?
Improved sitemap support is coming to
@nextjs
!
1. Create a `sitemap.ts` file inside `app/`
2. Fetch dynamic data + return an array of routes
3. ๐
Now on `next
@canary
` and soon to a stable version.
In 2015, I spent weeks learning Docker.
I found it interesting, but more importantly, I believed learning Docker would help me grow in my career.
And it did. Working with Docker also improved my knowledge of bash scripts, CI/CD, and unix.
Now almost a decade later, I rarelyโฆ
I saw some developers frustrated about Next.js on Reddit.
To help explain the new concepts, I made a 12-minute video walking through their frustrations.
Maybe my response will be helpful for others ๐
Let's build an email client with
@nextjs
and Postgres โ๏ธ
โ Navigate between routes in a column layout while maintaining scroll position (layouts support)
โ Submit forms without JavaScript enabled (progressive enhancement)
โ Navigate between routes extremely fast (prefetchingโฆ
๐ฅ Design tip: small changes can make a huge impact.
Ensure tables with numbers are easy to scan vertically. For example, using the CSS `font-variant-numeric` property to make numbers the same size.
We're exploring moving to Lightning CSS in
@nextjs
โก๏ธ
You can try it out on `next
@latest
` when using `next dev --turbo`. Also, I love their website โ
CSS now has cross-browser support for:
โ Variables
โ Nesting
โ Container Queries
โ :has()
โ text-wrap: balance
I made a demo that uses them all, because why not?
is so incredible.
โพ๏ธCSS โ Tailwind
โพ๏ธSVG โ JSX
โพ๏ธHTML โ JSX
โพ๏ธJSON โ GraphQL
โพ๏ธJSON โ TypeScript
โพ๏ธMardown โ HTML
And more! Built with Next.js and
@vercel
๐ฅ
โ๏ธ VP of Developer Experience at โฒ
@Vercel
Big news! Excited to share DevRel is growing to form our new Developer Experience organization. I wrote some thoughts about why DevRel must adapt for the new era of advocacy.
My course on Next.js is now available free โจ
Learning Next.js will transform how you build web applications. I'm thrilled to be able to share this with a larger audience.
Check it out!
How to get the best image performance (Updated 2021)
1๏ธโฃ Use `width` and `height` to prevent layout shift
2๏ธโฃ Lazy-load images as they enter the viewport
3๏ธโฃ Use modern image formats (WebP, AVIF)
4๏ธโฃ Serve correctly sized images using `srcset`
5๏ธโฃ Provide blur-up placeholders
Meet the new `create-next-app`:
โ TypeScript by default
โ Interactive configuration
โ Faster, single-shot dependency installs
Kudos to
@ctjlewis
for their work on this!
๐ก
@nextjs
tip: `next/link` will soon no longer require manually adding an `<a>` tag as a child. You can opt-in today with a flag before this becomes the default in the next major version.
More details โ
Introducing the new
@nextjs
documentation:
โ โ+K search
โ App/Pages toggle
โ Improved codeblocks
โ Dark/light/system theming
With the release of 13.4, the beta docs are now merged back into stable.
Kudos to
@delba_oliveira
and
@emilkowalski_
!
We're improving
@nextjs
โ/image to support:
โ Using the <picture> tag
โ Handling art direction
โ Light/dark mode images
โ Serving different images for HiDPI displays
Landing soon on `canary` โ kudos to
@styfle
๐
Today, weโre announcing important Heroku updates. These include an interactive product roadmap on
#GitHub
, support programs for students and nonprofits, as well as phasing out free product plans. See what the future of building on
#Heroku
looks like:
โจ New
@nextjs
docs: Forms & Mutations!
Including revalidating cached data, loading & error states, server actions, form validation, reading cookies and headers, and more.
Both JS/TS and Pages/App Router!
Next.js 12 with ES Modules & URL Imports ๐ฆ
This demo fetches Markdown from the GitHub API and converts it into HTML with syntax highlighting.
It's a self-documenting demo of what's happening behind the scenes. My favorite!
Just JavaScript by
@dan_abramov
and
@Mappletons
is fantastic. I already loved it, and then I saw the site is using Next.js and
@vercel
๐ฅฐ
I'll pick three random people who RT this and buy them a copy. Support course creators!
Y'all know I just genuinely like Next.js, right?
Like... I would use it if I didn't work at Vercel.
Actually, wait, I did do that. I helped my last company move from Express + React to Next.js self-hosted on Kubernetes.
It's not that deep ๐ You can be excited about tech.
The
@nextjs
App Router now supports static exports!
Start with a static site / SPA, then later upgrade to use server features. It now also supports static i18n routing and static API Routes (with Route Handlers).
Now available on `canary`, soon stable!
I don't think I've been very transparent about all of work happening around usage controls and pricing at Vercel. So I'd like to do that now.
The tl;dr of the feedback is: more visibility into usage and more ways to control spending. And I think I haven't done a job good aboutโฆ
Material UI is planning to move to a zero-runtime CSS-in-JS solution. Great news! ๐ฅณ
This will help all MUI applications ship less JavaScript, and be compatible with React Server Components.
New: Google Gemini + Vercel AI SDK chatbot template โจ
Book a flight, select your seat, check out, and more โ all with server-driven, interactive Generative UI components.
Open-source and hackable!
We've released a long-term migration of our Node.js website that enhances the developer experience! By migrating the underlying technology, we improved performance and ease of maintenance.
Big thanks to
@wunderacle
,
@_richard_lau_
and many other contributors for the support ๐
1/ You want to use serverless. But you've heard about issues connecting to your database...
Here's how can you use databases in serverless environments like AWS Lambda,
@vercel
, and
@Cloudflare
.
If it can be optimized for TypeScript usage, it will be optimized for TypeScript usage.
e.g. databases, ORMs, frontend frameworks, styling libraries, etc.
๐ Kysely:
is now using React 18!
React 18 prepares for Server Components, Suspense and concurrent rendering, and minimal runtime JS.
Next, we're adding streaming server-rendering support to Next.js ๐
SvelteKit can now run on
@Vercel
Edge Functions!
โ Dynamic at the speed of static
โ Zero-client-side JS
โ Deployed globally in seconds
Kudos to
@Rich_Harris
for the great work here.