/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", ul: "ul", li: "li", a: "a", pre: "pre", code: "code", span: "span", hr: "hr" }, _provideComponents(), props.components), {ArticleImage} = _components; if (!ArticleImage) _missingMdxReference("ArticleImage", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "I attended the 2024 Next.js Conference in San Francisco this week. It was a great opportunity to meet some amazing folks and learn about the latest developments in the Next.js ecosystem." }), "\n", _jsx(_components.p, { children: "First up, Next.js 15 launched with some cool new long awaited features:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering", children: "Partial Prerendering" }), ": A new rendering model that combines static and dynamic content for faster page loads. It statically pre-renders a shell of your page while streaming in dynamic content, giving users instant initial views."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/blog/turbopack-for-development-stable", children: "Stable Turbopack" }), ": The Rust-based successor to Webpack is now production-ready, delivering up to 96% faster code updates and 77% faster local server startup. Check out the ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/turbopack", children: "detailed docs" }), " to get started."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/blog/next-15#async-request-apis-breaking-change", children: "Async Request APIs" }), ": A more efficient way to handle request-specific data. Here's a practical example using Partial Prerendering:"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx", children: [_jsx(_components.span, { className: "token comment", children: "// app/page.tsx" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Suspense" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'react'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " headers ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'next/headers'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token comment", children: "// Static content pre-rendered at build time" }), "\n", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "StaticShell" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "hero", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Welcome to Our Store" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Browse our latest products..." }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token comment", children: "// Dynamic content loaded on request" }), "\n", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "UserCart" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " headersList ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "headers" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// New async API" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " token ", _jsx(_components.span, { className: "token operator", children: "=" }), " headersList", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "get" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'authorization'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " cart ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "fetch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'/api/cart'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n headers", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " authorization", _jsx(_components.span, { className: "token operator", children: ":" }), " token ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " items ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "await" }), " cart", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "json" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Your Cart (" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "items", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "length" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: " items)" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "items", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "item ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "key" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "item", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "item", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Page" }) }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "main"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "StaticShell" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Suspense" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "fallback" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Loading cart..." }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "UserCart" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/blog/next-15#react-19", children: "React 19 Support" }), " with the new ", _jsx(_components.a, { href: "https://nextjs.org/blog/next-15#eslint-9-support", children: "React Compiler" }), " for automatic optimizations."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/blog/next-15#support-for-nextconfigts", children: "TypeScript Config Support" }), ": First-class support for ", _jsx(_components.code, { children: "next.config.ts" }), " with type safety."] }), "\n"] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "I also met some amazing folks at the conference!" }), "\n", _jsxs(_components.p, { children: ["First up in the morningwas Sahil Lavingia from ", _jsx("a", { href: "https://gumroad.com", className: "text-blue-500 hover:text-blue-600", children: "Gumroad" }), ". We had a great conversation about his upcoming projects. Update: he just ", _jsx("a", { href: "https://x.com/shl/status/1871231606930981021", className: "text-blue-500 hover:text-blue-600", children: "announced them!" })] }), "\n", _jsx(ArticleImage, { src: "/images/posts/Sahil Lavingia and William Callahan.jpeg", alt: "Sahil Lavingia - Founder & CEO of Gumroad", caption: "Sahil Lavingia, Founder & CEO of Gumroad" }), "\n", _jsxs(_components.p, { children: ["Later, I had the chance to chat with ", _jsx("a", { href: "https://t3.gg", className: "text-blue-500 hover:text-blue-600", children: "Theo Browne" }), " about ", _jsx("a", { href: "https://rauchg.com", className: "text-blue-500 hover:text-blue-600", children: "Guillermo Rauch's" }), " keynote. You may recognize Theo from his ", _jsx("a", { href: "https://youtube.com/@t3dotgg", className: "text-blue-500 hover:text-blue-600", children: "YouTube" }), " or ", _jsx("a", { href: "https://twitch.tv/theo", className: "text-blue-500 hover:text-blue-600", children: "Twitch" }), " channel, and he's also the CEO of ", _jsx("a", { href: "https://ping.gg", className: "text-blue-500 hover:text-blue-600", children: "Ping" }), " (YC backed)."] }), "\n", _jsx(ArticleImage, { src: "/images/posts/Theo Browne and William Callahan.jpeg", alt: "Theo Browne - CEO of Ping.gg & Tech YouTuber", caption: "Theo Browne, CEO of Ping.gg" }), "\n", _jsxs(_components.p, { children: ["Finally, I finally met Rahul. You might remember him from ", _jsx("a", { href: "https://www.theverge.com/2022/10/28/23428775/twitter-fake-employee-layoff-rahul-ligma-elon-musk", className: "text-blue-500 hover:text-blue-600", children: "that viral Twitter layoff story" }), " right after the Musk acquisition closed. Rahul is now hard at work building ", _jsx("a", { href: "https://julius.ai", className: "text-blue-500 hover:text-blue-600", children: "Julius AI" }), ", which is growing fast."] }), "\n", _jsx(ArticleImage, { src: "/images/posts/Rahul Sonwalkar and William Callahan.jpeg", alt: "Rahul Sonwalkar - Founder of Julius AI", caption: "Rahul Sonwalkar, Founder of Julius AI" }), "\n", _jsxs(_components.p, { children: ["Oh, and the night before the conference, I participated in ", _jsx("a", { href: "https://www.sanity.io", className: "text-blue-500 hover:text-blue-600", children: "Sanity.io's" }), " Next.js hackathon. To my surprise, I ended up winning a mechanical keyboard! It was a great way to kick off the conference experience."] }), "\n", _jsx(ArticleImage, { src: "/images/posts/William Callahan winning mechanical keyboard at SF hackathon.jpeg", alt: "Winning the Sanity.io Next.js Hackathon", caption: "Winning the Sanity.io Next.js Hackathon" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }