9c:I[3748432,["/vc-ap-vercel-marketing/_next/static/immutable/chunks/3w6ruonc8cdgg.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/3t63-ntij50lk.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1c45vqmo47y8d.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/28wg_iziqp5fa.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/15zd898anx_9a.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0k0eovtg01tax.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1mu4hmtn60x-7.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0qmojuvlrv9le.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/01pkp3drm-6uk.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1sftuavmvaeua.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/33gphdpb69qfx.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1mk0wa0gr99__.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/3k8ou-vbhs9ni.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/15nu7g0eapygy.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/27b97arnxcnuk.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2tk9ejd7ii5nz.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2e_lridmjs-zw.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0yx5wk6blw-k8.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0o8vyxzo3_k3o.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/3wtzm-ik3bjec.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/41vpeq_2d_1gl.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2lbqxzfy_p0gl.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/34sg5mrfoviv1.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2_24irt9gfc5a.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1o4g0_v6hrh2g.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2166gs145z79u.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2ch2us9eg66ha.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0850e3k8tqi7e.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/09wx8-jaqm2ai.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2gpy1mpw-dsah.js"],"NavigationMarker"] 9d:I[2474444,["/vc-ap-vercel-marketing/_next/static/immutable/chunks/3w6ruonc8cdgg.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/3t63-ntij50lk.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1c45vqmo47y8d.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/28wg_iziqp5fa.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/15zd898anx_9a.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0k0eovtg01tax.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1mu4hmtn60x-7.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0qmojuvlrv9le.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/01pkp3drm-6uk.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1sftuavmvaeua.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/33gphdpb69qfx.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1mk0wa0gr99__.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/3k8ou-vbhs9ni.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/15nu7g0eapygy.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/27b97arnxcnuk.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2tk9ejd7ii5nz.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2e_lridmjs-zw.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0yx5wk6blw-k8.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0o8vyxzo3_k3o.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/3wtzm-ik3bjec.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/41vpeq_2d_1gl.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2lbqxzfy_p0gl.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/34sg5mrfoviv1.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2_24irt9gfc5a.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/1o4g0_v6hrh2g.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2166gs145z79u.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2ch2us9eg66ha.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/0850e3k8tqi7e.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/09wx8-jaqm2ai.js","/vc-ap-vercel-marketing/_next/static/immutable/chunks/2gpy1mpw-dsah.js"],"BlogPostGrid"] 1b:[["$","$L9c",null,{"phase":"content","label":"MarketingPageWrapper"}],[["$","script",null,{"id":"vercel-blog-page-44-collection-json-ld","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"Blog – Page 44\",\"description\":\"Blog posts from the Vercel team and community.\",\"url\":\"https://vercel.com/blog/page/44\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@type\":\"WebSite\",\"name\":\"Vercel\",\"url\":\"https://vercel.com/\"},\"mainEntity\":{\"@type\":\"ItemList\",\"itemListOrder\":\"https://schema.org/ItemListOrderDescending\",\"numberOfItems\":518,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":517,\"url\":\"https://vercel.com/blog/next2\",\"name\":\"Next.js 2.0\"},{\"@type\":\"ListItem\",\"position\":518,\"url\":\"https://vercel.com/blog/next\",\"name\":\"Next.js\"}]},\"provider\":{\"@type\":\"Organization\",\"name\":\"Vercel Inc.\",\"url\":\"https://vercel.com/\"}}"}}],["$","section",null,{"className":"flex flex-col relative gap-16 @md:gap-20 @lg:gap-24 pb-16 @md:pb-20 @lg:pb-24","children":[["$","h2",null,{"className":"geist-sr-only","children":["Blog, page ",44]}],["$","$L9d",null,{"posts":[{"title":"Next.js 2.0","slug":"next2","category":{"name":"Community","slug":"community","description":"Explore what’s new from your favorite frameworks and tools.","isDraft":false},"intro":{"data":{},"nodeType":"document","content":[{"data":{},"content":[{"data":{},"marks":[],"value":"More than ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"3.1 million developers","nodeType":"text"},{"data":{},"marks":[],"value":" read our ","nodeType":"text"},{"data":{"uri":"https://vercel.com/blog/next"},"content":[{"data":{},"marks":[],"value":"announcement post","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" of ","nodeType":"text"},{"data":{"uri":"https://github.com/zeit/next.js"},"content":[{"data":{},"marks":[],"value":"Next.js","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":". More than ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"110 contributors","nodeType":"text"},{"data":{},"marks":[],"value":" have submitted patches, examples or improved our documentation. Over ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"10,000 developers","nodeType":"text"},{"data":{},"marks":[],"value":" have starred us on ","nodeType":"text"},{"data":{"uri":"https://github.com/zeit/next.js"},"content":[{"data":{},"marks":[],"value":"GitHub","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Today, we are proud to introduce ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"Next 2.0","nodeType":"text"},{"data":{},"marks":[],"value":" to the world. What follows is a quick summary of every new feature and improvement we have made.","nodeType":"text"}],"nodeType":"paragraph"}]},"content":{"data":{},"nodeType":"document","content":[{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"React Made Easy and Simple","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Next.js is a very slim yet powerful framework. Place React components in a ","marks":[],"data":{}},{"nodeType":"text","value":"pages","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" directory and running ","marks":[],"data":{}},{"nodeType":"text","value":"next","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":", and you'll get automatic code splitting, routing, hot code reloading and universal (server-side and client-side) rendering.","marks":[],"data":{}}]},{"nodeType":"embedded-asset-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"6vqZj6l9aU0PE1vZy6rs07","type":"Asset","createdAt":"2020-12-18T14:04:10.351Z","updatedAt":"2020-12-18T14:04:10.351Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":1,"locale":"en-US"},"fields":{"title":"Hello World with Next.js 2.0","description":"The \"Hello World\" of Next.js, as presented in our introductory post.\n\n(1047/409)","file":{"url":"//videos.ctfassets.net/e5382hct74si/6vqZj6l9aU0PE1vZy6rs07/2a86172e0387d5c23469ea84cdb0194a/hello-world_2.mp4","details":{"size":2107275},"fileName":"hello-world_2.mp4","contentType":"video/mp4"}}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"It's ","marks":[],"data":{}},{"nodeType":"text","value":"easy","marks":[{"type":"bold"}],"data":{}},{"nodeType":"text","value":" because it's one command for development (","marks":[],"data":{}},{"nodeType":"text","value":"next","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":"), and two others (","marks":[],"data":{}},{"nodeType":"text","value":"next build","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" and ","marks":[],"data":{}},{"nodeType":"text","value":"next start","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":") for a production-ready app.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"It's ","marks":[],"data":{}},{"nodeType":"text","value":"simple","marks":[{"type":"bold"}],"data":{}},{"nodeType":"text","value":" because it composes really well. It plays well with the rest of the React and JavaScript (npm) ecosystems.\nIt's also very ","marks":[],"data":{}},{"nodeType":"text","value":"small","marks":[{"type":"bold"}],"data":{}},{"nodeType":"text","value":". Check out the ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js"},"content":[{"nodeType":"text","value":"README","marks":[],"data":{}}]},{"nodeType":"text","value":": the entire framework's documentation is a 5 minute read.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"NEW!","marks":[{"type":"bold"}],"data":{}},{"nodeType":"text","value":" Want to learn step-by-step, by example? Check out the ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://nextjs.org/learn"},"content":[{"nodeType":"text","value":"Learn Next.js","marks":[],"data":{}}]},{"nodeType":"text","value":" tutorial!","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Programmatic API","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"When we launched Next.js, there was no way to do dynamic routing or load your custom server code. We did this because we believe in shipping early and often.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Now, you can run ","marks":[],"data":{}},{"nodeType":"text","value":"node index.js","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" to boot up your own custom server and take full control of the routing and rendering pipeline. This enables powerful features like ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js/tree/master/examples/custom-server-express"},"content":[{"nodeType":"text","value":"fancy URLs","marks":[],"data":{}}]},{"nodeType":"text","value":" or ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js/tree/master/examples/ssr-caching"},"content":[{"nodeType":"text","value":"custom caching schemes","marks":[],"data":{}}]},{"nodeType":"text","value":".","marks":[],"data":{}}]},{"nodeType":"embedded-entry-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"cYaoI6pXyShcX3yobKwIE","type":"Entry","createdAt":"2020-12-18T14:05:35.883Z","updatedAt":"2020-12-18T14:21:09.095Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":9,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Programmatic API for Next.js","language":"JavaScript","content":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","content":[{"nodeType":"text","value":"const express = require('express')\nconst next = require('next')","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"const dev = process.env.NODE_ENV !== 'production'\nconst app = next({ dev })\nconst handle = app.getRequestHandler()","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"app.prepare().then(() => {\n const server = express()","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":" server.get('/r/:subreddit', (req, res) => {\n return app.render(req, res, '/b', {\n ...req.query,\n subreddit: req.params.subreddit\n })\n })","marks":[{"type":"bold"}],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":" server.get('*', (req, res) => {\n handle(req, res)\n })\n server.listen(3000)\n})","marks":[],"data":{}}],"data":{}}]},"caption":"Implementing Reddit-style fancy URLs with Express and Next.js"}}},"content":[]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Bring Your Own React","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"To start a project, you now need to bring in ","marks":[],"data":{}},{"nodeType":"text","value":"next","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" and two extra deps: ","marks":[],"data":{}},{"nodeType":"text","value":"react","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" and ","marks":[],"data":{}},{"nodeType":"text","value":"react-dom","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":".","marks":[],"data":{}}]},{"nodeType":"embedded-entry-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"1GNazM9uml5PvRU8iUSqhO","type":"Entry","createdAt":"2020-12-18T14:06:25.509Z","updatedAt":"2026-03-17T09:10:28.479Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Installing React and React DOM via CLI","language":"Bash","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"npm install --save next react react-dom","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"hideLineNumbers":true}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"This has tremendous benefits, at the tiny cost of two extra parameters in the initial `install` to set up your project:","marks":[],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"You can pin React to the version that you know works well on your project","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"It makes Next.js codebase clean and pluggable","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"You can update React independently of us. e.g: no waiting for a Next.js release after React gets updated","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"You can experiment with alternative implementations of the React API. We have examples for ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js/tree/master/examples/using-inferno"},"content":[{"nodeType":"text","value":"Inferno","marks":[],"data":{}}]},{"nodeType":"text","value":" and ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js/tree/master/examples/using-preact"},"content":[{"nodeType":"text","value":"Preact","marks":[],"data":{}}]},{"nodeType":"text","value":"!","marks":[],"data":{}}]}]}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Component CSS Support","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Our mission is to make Next.js as familiar as possible to developers on the Web Platform. To that end, ","marks":[],"data":{}},{"nodeType":"text","value":"next/css","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" is now deprecated in favor of ","marks":[],"data":{}},{"nodeType":"text","value":"styled-jsx","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":", a Babel transformation that gives us scoped (isolated) full CSS support.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"This is what a component with CSS that's local, conflict-free, server-rendered and injected once per instance looks like:","marks":[],"data":{}}]},{"nodeType":"embedded-entry-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"2G7TISxGhHOyEtr7WETu4l","type":"Entry","createdAt":"2020-12-18T14:07:40.067Z","updatedAt":"2020-12-18T14:21:38.717Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":3,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Component CSS Support","language":"JavaScript","content":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","content":[{"nodeType":"text","value":"export default () => (\n

hi there

","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":" \n

\n)","marks":[],"data":{}}],"data":{}}]},"caption":"The styles for `p` only apply to the JSX tags defined statically within the scope"}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"You can read more about ","marks":[],"data":{}},{"nodeType":"text","value":"styled-jsx","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" on its ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/styled-jsx"},"content":[{"nodeType":"text","value":"GitHub","marks":[],"data":{}}]},{"nodeType":"text","value":" repository.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Pre-fetching","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We implemented the ","marks":[],"data":{}},{"nodeType":"text","value":"prefetch","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" attribute for the ","marks":[],"data":{}},{"nodeType":"text","value":"","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" component.","marks":[],"data":{}}]},{"nodeType":"embedded-entry-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"25qdQwCaBADi8T5GWDmE0R","type":"Entry","createdAt":"2020-12-18T14:08:55.555Z","updatedAt":"2020-12-18T14:21:59.121Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Prefetching in Next.js 2.0","language":"JavaScript","content":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","content":[{"nodeType":"text","value":"export default () => (\n

\n Go to the next page\n

\n)","marks":[],"data":{}}],"data":{}}]}}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"And just like that, you get the performance of a \"SPA\", without the initial download and expensive bootup penalty of big bundles. Combined with server rendering, this typically means extraordinary performance with very little effort.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Next News","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We think a better \"Hello World\" app than TodoMVC is actually… Hacker News!","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Our implementation, Next News, is fully server-rendered, queries the data over Firebase and updates in realtime as new votes come in. Check out the demo at ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://next-news.vercel.app/"},"content":[{"nodeType":"text","value":"next-news.vercel.app","marks":[],"data":{}}]},{"nodeType":"text","value":".","marks":[],"data":{}}]},{"nodeType":"embedded-asset-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"3FLNRSkvYVoLgSno9KdIYQ","type":"Asset","createdAt":"2020-12-18T15:00:06.383Z","updatedAt":"2020-12-18T16:15:20.154Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":12,"revision":3,"locale":"en-US"},"fields":{"title":"Next News","description":"Navigating around Next News is snappy!","file":{"url":"//images.ctfassets.net/e5382hct74si/3FLNRSkvYVoLgSno9KdIYQ/05085ec704b9f68cb7b91d4dcfd06502/hn.gif","details":{"size":567294,"image":{"width":1126,"height":685}},"fileName":"hn.gif","contentType":"image/gif"}}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"To show off our ability to both partially or fully server render, while having the freedom to execute arbitrary codepaths on the client (upon ","marks":[],"data":{}},{"nodeType":"text","value":"componentDidMount","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":"), notice that we show a \"Loading…\" message when loading an item on the client, but not when we server-render. This makes us a less strict ","marks":[],"data":{}},{"nodeType":"text","value":"clone","marks":[{"type":"italic"}],"data":{}},{"nodeType":"text","value":", but it's for a good cause.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We also went as far as replicating the style-less HN login page. Each top-level component (page) in Next.js defines the ","marks":[],"data":{}},{"nodeType":"text","value":"entirety of the document","marks":[{"type":"italic"}],"data":{}},{"nodeType":"text","value":". There's no notion of global layouts or configuration, only composition via React's component system, which gives you great flexibility.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"More Examples","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We're very thankful to our community for having submitted so many examples of backends (Express, HAPI, Koa…), styling systems (cxs, glamor, styled-components…), testing systems (jest), type systems (TypeScript and Flow), data fetching (Apollo) and many others.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"You can find them all ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/vercel/next.js/tree/master/examples"},"content":[{"nodeType":"text","value":"in our GitHub repository","marks":[],"data":{}}]},{"nodeType":"text","value":".","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Scalable HMR (Hot Module Replacement)","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Out of the box, Webpack watches and recompiles your entire project upon any change. We found that HMR was therefore not scaling well as our projects grew in number of code-splitting entry points and components.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We deployed a new lazy compilation mechanism that only subscribes to the pages that you're actually working on (i.e.: all the component trees currently rendered).","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"In our tests, this has made compilation 10 to 20 times faster for large projects.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"A Smaller Build","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We've made some important improvements to how builds work:","marks":[],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We set up Webpack common chunks to avoid shipping repeated code across components","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We use hashes to make the initial bundle files be cached permanently on clients, making page loads faster","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We added provisions to make sure an app works correctly","marks":[],"data":{}}]}]}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"The best part? Every Next.js app is now smaller and more efficient.","marks":[],"data":{}}]},{"nodeType":"embedded-asset-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"6OXO5Fh38zIZAAMOp4YHyk","type":"Asset","createdAt":"2020-12-18T14:14:33.796Z","updatedAt":"2020-12-18T14:14:33.796Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":1,"locale":"en-US"},"fields":{"title":"Bundle Size with Next.js 2.0","description":"Data for a basic site with the Next.js and React bundled","file":{"url":"//images.ctfassets.net/e5382hct74si/6OXO5Fh38zIZAAMOp4YHyk/d952d8514f6d4adf132137c16248cbcf/smaller-build.png","details":{"size":56949,"image":{"width":1130,"height":376}},"fileName":"smaller-build.png","contentType":"image/png"}}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We are working on making Next.js much smaller and we have identified many opportunities for optimization already.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"The React team is also working on size optimizations for React Fiber, which we will begin testing soon.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Fully Extensible","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Many of the examples above introduce new features to the code or the build process. This is possible because Next.js gives you complete control over Babel's and Webpack's configuration.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"To extend Babel, we let you apply Next.js' settings as a preset.","marks":[],"data":{}}]},{"nodeType":"embedded-entry-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"7MSbOkjWylbJOl9VupknhJ","type":"Entry","createdAt":"2020-12-18T14:15:48.415Z","updatedAt":"2020-12-18T14:16:08.853Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":9,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Extending Babel and Webpack Config with Next.js 2.0","language":"JSON","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"{\n \"name': \"my-next-app\",\n […]\n \"babel\": {\n \"presets\": [\"next/babel\"],\n \"plugins\": [[\n \"transform-define\",\n \"./env-config.js\"\n ]]\n }\n}","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"},"caption":"`babel-plugin-transform-define` will let you to replace any JS expression mapped in `env-config.js` at compile time"}}},"content":[]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"To extend webpack or tweak other settings, you can define a ","marks":[],"data":{}},{"nodeType":"text","value":"next.config.js","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" file. Check out the ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js#custom-configuration"},"content":[{"nodeType":"text","value":"README","marks":[],"data":{}}]},{"nodeType":"text","value":" for the complete documentation.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Featured at ReactConf","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Our CEO ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://twitter.com/rauchg"},"content":[{"nodeType":"text","value":"Guillermo Rauch","marks":[],"data":{}}]},{"nodeType":"text","value":" presented Next.js at ReactConf in Santa Clara a few weeks ago. Check it out!","marks":[],"data":{}}]},{"nodeType":"embedded-entry-block","data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"1qUw7vVtyvXgUHBUwinLHv","type":"Entry","createdAt":"2020-12-18T14:40:56.738Z","updatedAt":"2023-12-26T16:57:35.459Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"youTubeVideo"}},"locale":"en-US"},"fields":{"name":"Guillermo Rauch - Next.js: Universal React Made Easy and Simple - React Conf 2017","url":"https://www.youtube.com/watch?v=evaMpdSiZKk","width":640,"height":360,"caption":"Next.js: Universal React Made Easy and Simple - React Conf 2017"}}},"content":[]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"The Road to 3.0","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We attribute our success with this release to having released early, iterated frequently and listened to our community. But something extremely important as well was making our roadmap and priorities ","marks":[],"data":{}},{"nodeType":"text","value":"clear and public","marks":[{"type":"bold"}],"data":{}},{"nodeType":"text","value":".","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Here are some of the goals for the coming releases on our way to 3.0:","marks":[],"data":{}}]},{"nodeType":"heading-3","data":{},"content":[{"nodeType":"text","value":"Improved HMR","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We are still working on a few improvements to hot module replacement. Some errors don't have accurate locations and there are a few issues with recovering from errors in certain scenarios.","marks":[],"data":{}}]},{"nodeType":"heading-3","data":{},"content":[{"nodeType":"text","value":"Faster Dev Compilation","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We are investigating ways to continue to optimize the development experience. Since both Node.js and modern browsers that developers use iterate so quickly, we can skip large portions of the compilation step for really fast reloads.","marks":[],"data":{}}]},{"nodeType":"heading-3","data":{},"content":[{"nodeType":"text","value":"Seamless Support for Lazy ","marks":[],"data":{}},{"nodeType":"text","value":"import()","marks":[{"type":"code"}],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"This will allow for server-rendered pages that expose different JS components according to the data they used, for example. In addition, once the component mounts on the client, you can load any component you want, lazily.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Note:","marks":[{"type":"italic"}],"data":{}},{"nodeType":"text","value":" this already partially works, but we will continue to refine it an document it.","marks":[],"data":{}}]},{"nodeType":"heading-3","data":{},"content":[{"nodeType":"text","value":"React Fiber","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We are looking forward to testing and ensuring Next.js works perfectly with the upcoming React engine: Fiber. This will potentially introduce new opportunities, like the ability to ","marks":[],"data":{}},{"nodeType":"text","value":"stream HTML from the server","marks":[{"type":"italic"}],"data":{}},{"nodeType":"text","value":" as it is generated.","marks":[],"data":{}}]},{"nodeType":"heading-3","data":{},"content":[{"nodeType":"text","value":"Static Exports","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"You should be able to ","marks":[],"data":{}},{"nodeType":"text","value":"server-render to files","marks":[{"type":"italic"}],"data":{}},{"nodeType":"text","value":" via a ","marks":[],"data":{}},{"nodeType":"text","value":"next export","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" command. In other words, you'll be able to statically export your application to HTML files.","marks":[],"data":{}}]},{"nodeType":"heading-2","data":{},"content":[{"nodeType":"text","value":"Ready for Production","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"Aside from this very website, we are very happy many others in the industry have adopted Next.js. Here are some that have ","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://github.com/zeit/next.js/issues/1458"},"content":[{"nodeType":"text","value":"let us know","marks":[],"data":{}}]},{"nodeType":"text","value":".","marks":[],"data":{}}]},{"nodeType":"unordered-list","data":{},"content":[{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://www.npmjs.com/search"},"content":[{"nodeType":"text","value":"NPM","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://www.scale.com/"},"content":[{"nodeType":"text","value":"Scale","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://opencollective.com/"},"content":[{"nodeType":"text","value":"Open Collective","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://tutorbro.com/"},"content":[{"nodeType":"text","value":"Tutor Bro","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://upsum.news/"},"content":[{"nodeType":"text","value":"Upsum News","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://skyslimo.com/"},"content":[{"nodeType":"text","value":"Skys Limo","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]},{"nodeType":"list-item","data":{},"content":[{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"","marks":[],"data":{}},{"nodeType":"hyperlink","data":{"uri":"https://project-r.construction/"},"content":[{"nodeType":"text","value":"Project R","marks":[],"data":{}}]},{"nodeType":"text","value":"","marks":[],"data":{}}]}]}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"If you have shipped Next.js to production or are planning to, please let us know. We are always hanging out on the ","marks":[],"data":{}},{"nodeType":"text","value":"#next","marks":[{"type":"code"}],"data":{}},{"nodeType":"text","value":" channel in our Public Slack community.","marks":[],"data":{}}]},{"nodeType":"paragraph","data":{},"content":[{"nodeType":"text","value":"We are bringing together the Next.js community at our one-day conference ZEIT Day on April 29th in San Francisco. It's a unique opportunity to meet other users and learn more about it from its creators!","marks":[],"data":{}}]}]},"ogDescription":"Next.js 2.0 comes packed with performance improvements and extensibility features","date":"2017-03-27","authors":[{"name":"Arunoda Susiripala","avatar":{"title":"Arunoda Susiripala (128x128)","url":"https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/3K8G4WxzNnlRTsVCW8Okp8/ddaf5499c753782a05e82e94c07e1467/arunoda-susiripala-128.jpg","width":127,"height":127,"fileName":"arunoda-susiripala-128.jpg","contentType":"image/jpeg"},"vercelUsername":"arunoda-zeit","twitterUsername":"arunoda","vercelian":false,"isDraft":false},{"name":"Naoyuki Kanezawa","avatar":{"title":"Naoyuki Kanezawa (128x128)","url":"https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/1W9VSC3dPzvRXnojpFunob/7db2daeba21df8f8b0f7a82eab9c6868/naoyuki-kanezawa-128.jpg","width":127,"height":127,"fileName":"naoyuki-kanezawa-128.jpg","contentType":"image/jpeg"},"vercelUsername":"nkzawa","twitterUsername":"nkzawa","vercelian":true,"isDraft":false},{"name":"Tim Neutkens","avatar":{"title":"Tim Neutkens (128x128)","url":"https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/3qpukZUFWeMeofHEHHpvga/dbadd4bfe0fc8d7ebabeaaa9604cfd7e/tim-neutkens-128.jpg","width":127,"height":127,"fileName":"tim-neutkens-128.jpg","contentType":"image/jpeg"},"vercelUsername":"timvercel","twitterUsername":"timneutkens","vercelian":true,"role":"Software Engineer","isDraft":false}],"isDraft":false,"sysId":"1V2fOaoqfQbuwL4OGGINpM","contentfulStatus":"published"},{"title":"Next.js","slug":"next","category":{"name":"Community","slug":"community","description":"Explore what’s new from your favorite frameworks and tools.","isDraft":false},"intro":{"data":{},"nodeType":"document","content":[{"data":{},"content":[{"data":{},"marks":[],"value":"We're very proud to open-source ","nodeType":"text"},{"data":{"uri":"https://github.com/vercel/next.js"},"content":[{"data":{},"marks":[],"value":"Next.js","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":", a small framework for server-rendered universal JavaScript webapps, built on top of React, Webpack and Babel, which powers this very site!","nodeType":"text"}],"nodeType":"paragraph"}]},"content":{"data":{},"nodeType":"document","content":[{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"7Fv6qptK6F0nIa7wYK2O78","type":"Asset","createdAt":"2020-12-18T09:12:26.168Z","updatedAt":"2020-12-18T09:12:26.168Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":1,"locale":"en-US"},"fields":{"title":"Next.js Hello World","description":"The \"Hello World\" of Next.js\n\n(1047/409)","file":{"url":"//videos.ctfassets.net/e5382hct74si/7Fv6qptK6F0nIa7wYK2O78/f1f48ba62a599e1a24bf11341bbe0b87/hello-world_2.mp4","details":{"size":2107275},"fileName":"hello-world_2.mp4","contentType":"video/mp4"}}}},"content":[],"nodeType":"embedded-asset-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"To start using it, run inside a new directory with a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"package.json","nodeType":"text"},{"data":{},"marks":[],"value":":","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"54HRclPkmAmw2hqLfvO7qO","type":"Entry","createdAt":"2020-12-18T09:18:34.410Z","updatedAt":"2020-12-18T09:18:34.410Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Installing Next.js and Creating a Pages Directory","language":"Bash","content":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","content":[{"nodeType":"text","value":"$$ npm install next --save\n$ mkdir pages","marks":[],"data":{}}],"data":{}}]}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"Populate ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"pages/index.js","nodeType":"text"},{"data":{},"marks":[],"value":":","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"7DPQCnJ4mEtrUcTlcof8oq","type":"Entry","createdAt":"2020-12-18T09:19:33.062Z","updatedAt":"2020-12-18T09:19:33.062Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"A Hello World Next.js Page","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"import React from 'react'\nexport default () =>

Hello world!

","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"Add a script to the ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"package.json","nodeType":"text"},{"data":{},"marks":[],"value":" like this:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"43y4p0GmhZIlx9DsvIj4Pf","type":"Entry","createdAt":"2020-12-18T09:20:15.879Z","updatedAt":"2020-12-18T09:25:42.746Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Next.js Development Script","language":"JSON","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"{\n \"scripts\": {\n \"dev\": \"next\"\n }\n}","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"and run:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"2w1vN1gsP6zOEHlJigzdAA","type":"Entry","createdAt":"2020-12-18T09:20:49.634Z","updatedAt":"2020-12-18T09:20:52.023Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Running the Next.js Development Script","language":"Bash","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"$$ npm run dev","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"This blog post will go into the philosophy and design decisions of the project.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"To learn how to use Next.js instead, please refer to the ","nodeType":"text"},{"data":{"uri":"https://github.com/vercel/next.js"},"content":[{"data":{},"marks":[],"value":"README","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":", where you can learn the entirety of the tool's capabilities in just a few minutes.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"First we'll dive into the ","nodeType":"text"},{"data":{"uri":"https://vercel.com/blog/next#background"},"content":[{"data":{},"marks":[],"value":"background","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" of the project and then describe 6 basic principles:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"uri":"#zero-setup.-use-the-filesystem-as-an-api"},"content":[{"data":{},"marks":[],"value":"Zero setup. Use the filesystem as an API","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"uri":"#only-javascript.-everything-is-a-function"},"content":[{"data":{},"marks":[],"value":"Only JavaScript. Everything is a function","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"uri":"#automatic-server-rendering-and-code-splitting"},"content":[{"data":{},"marks":[],"value":"Automatic server rendering and code splitting","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"uri":"#data-fetching-is-up-to-the-developer"},"content":[{"data":{},"marks":[],"value":"Data fetching is up to the developer","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"uri":"#anticipation-is-the-key-to-performance"},"content":[{"data":{},"marks":[],"value":"Anticipation is the key to performance","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"},{"data":{"uri":"#simple-deployment"},"content":[{"data":{},"marks":[],"value":"Simple deployment","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"ordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"Background","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"For many years now, we have been pursuing a vision of ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"universal JavaScript applications","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Node.js led the way, by enabling code sharing between client and server, broadening the contribution surface for many developers around the world.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Many attempts were made to make it practical to develop apps and websites on Node. Many template languages and frameworks came along... but the technical divide between frontend and backend remained.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"If you for example picked Express and Jade, some HTML would be rendered by the server and then a ","nodeType":"text"},{"data":{},"marks":[{"type":"italic"}],"value":"different codebase","nodeType":"text"},{"data":{},"marks":[],"value":" (powered by jQuery or similar libraries) would take over.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"That situation was really no better than, say, PHP's. In many ways, PHP was actually more suited for the \"server rendering of HTML\" job. Prior to async/await, it was difficult to query data services in JS. Catching and limiting errors to the scope of the request/response was also notoriously difficult.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Since then, however, notable conceptual changes have allowed us to bridge this gap. The most important of which is the introduction of the pure ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"render function","nodeType":"text"},{"data":{},"marks":[],"value":" that returns the representation of the UI based on the available data at that point in time.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"This model (popularized by React) is of significant importance, but that alone is not necessarily different from how most template systems work. The other critical concept is the ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"component lifecycle","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Lifecycle hooks allow us to handle the ","nodeType":"text"},{"data":{},"marks":[{"type":"italic"}],"value":"continuation","nodeType":"text"},{"data":{},"marks":[],"value":" of some rendering that originated on the server. You can start with a static representation of data, subscribe to realtime updates from a server, and change it over time, for example. Or perhaps it just remains static.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[{"type":"bold"}],"value":"Next.js","nodeType":"text"},{"data":{},"marks":[],"value":" is our take on how to bring this vision forward.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Zero setup. Use the filesystem as an API","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"Tools make certain assumptions about your projects' structure within the filesystem.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"For example, we generally start a Node.js project by creating a new directory, placing a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"package.json","nodeType":"text"},{"data":{},"marks":[],"value":" inside, then installing modules into ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"./node_modules","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Next.js extends that structure by introducing a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"pages","nodeType":"text"},{"data":{},"marks":[],"value":" sub-directory where your top-level components live.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"For example, you can populate ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"pages/index.js","nodeType":"text"},{"data":{},"marks":[],"value":" which maps to the route ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"/","nodeType":"text"},{"data":{},"marks":[],"value":" with:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"5zsCJhNjK52S38BQNqvMUy","type":"Entry","createdAt":"2020-12-18T09:25:29.127Z","updatedAt":"2020-12-18T09:25:29.127Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":3,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Marquee within a Next.js Page","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"import React from 'react'\nexport default () => Hello world","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"and then ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"pages/about.js","nodeType":"text"},{"data":{},"marks":[],"value":" which maps to ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"/about","nodeType":"text"},{"data":{},"marks":[],"value":" with:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"6u6QWWAYqluZTzRGOT5nvW","type":"Entry","createdAt":"2020-12-18T09:26:20.585Z","updatedAt":"2020-12-18T09:26:20.585Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Basic \"About Us\" Next.js Page","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"import React from 'react'\nexport default () =>

About us

","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"We believe this is a great default to get started with and allows for very quick exploration of a project. When more advanced routing is required, we'll allow developers to intercept the request and take control [","nodeType":"text"},{"data":{"uri":"https://github.com/zeit/next.js/issues/25"},"content":[{"data":{},"marks":[],"value":"#25","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":"].","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"All that's needed to start working on the project is to run:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":"$1b:1:1:props:children:1:props:posts:1:content:content:8:data:target"},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"No configuration unless it's needed. Automatic hot-code reloading, error reporting, source maps, transpilation for older browsers.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Only JavaScript. Everything is a function","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"Every route within Next.js is simply a ES6 module that exports a function or class that extends from ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"React.Component","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"The advantages of this approach over similar models is that your entire system remains highly composable and testable. For example, a component can be rendered directly, or be imported and rendered by another top-level component.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Components can also introduce changes to the ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"","nodeType":"text"},{"data":{},"marks":[],"value":" of the page:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"xC7Xqgj76v0hjftJRkzxU","type":"Entry","createdAt":"2020-12-18T09:29:20.041Z","updatedAt":"2020-12-18T09:29:20.041Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Exposing Head from a Next.js Page","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"import React from 'react'\nimport Head from 'next/head'","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"export default () => (\n

\n \n \n \n

Hi. I'm mobile-ready!

\n)","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"Furthermore, no wrappers or transformations are needed to make this system fully testable. Your test suite can simply import and shallow-render your routes.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"We've also made the decision to embrace CSS-in-JS. We use the excellent ","nodeType":"text"},{"data":{"uri":"https://github.com/threepointone/glamor"},"content":[{"data":{},"marks":[],"value":"glamor","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" library which gives us the full unconstrained power of CSS without the need for CSS parsing and compilation:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"2rMGegPCszA8sAzhInm5RE","type":"Entry","createdAt":"2020-12-18T09:30:51.936Z","updatedAt":"2020-12-18T09:30:51.936Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":7,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Example of CSS-in-JS with Glamor","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"import React from 'react'\nimport css from 'next/css'","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"export default () =>

Hi there!

","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"const style = css({\n color: 'red',\n ':hover': {\n color: 'blue'\n },\n '@media (max-width: 500px)': {\n color: 'rebeccapurple'\n }\n})","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"We think this model offers superior performance, composability and integration with the server-rendering pipeline.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Automatic server rendering and code splitting","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"Two tasks have so far been simultaneously very difficult and highly desirable:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Server rendering","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"},{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Splitting your app's build into smaller bundles","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"list-item"}],"nodeType":"unordered-list"},{"data":{},"content":[{"data":{},"marks":[],"value":"With Next.js, every component inside ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"pages/","nodeType":"text"},{"data":{},"marks":[],"value":" gets server-rendered automatically and their scripts inlined.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"When a component is loaded dynamically through ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"","nodeType":"text"},{"data":{},"marks":[],"value":" or ","nodeType":"text"},{"data":{"uri":"https://nextjs.org/docs/routing/introduction"},"content":[{"data":{},"marks":[],"value":"the router","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":", we fetch a JSON based representation of the page which likewise contains its scripts.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"This means that a certain page could have an extensive list of imports:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"3j4FXe1PGf5UChf0BwnMDg","type":"Entry","createdAt":"2020-12-18T09:31:52.299Z","updatedAt":"2020-12-18T09:31:52.299Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":4,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Importing a Bunch of Packages","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"import React from 'react'\nimport d3 from 'd3'\nimport jQuery from 'jquery'","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"… that don't affect the performance of the rest of the pages.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"This detail is particularly powerful for large teams of people that collaborate on components with very different technical and business requirements. The performance penalties incurred in by a team or individual won't affect the rest of the organization's.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Data fetching is up to the developer","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"Server-rendering of static JSX is an important achievement, but real-world applications deal with dynamic data coming from different API calls and network requests.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Next.js makes a very important extension to the React's Component contract: ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"getInitialProps","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"A page that fetches some data would look as follows:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"20oHHxhOWKPJcDiViZx2JD","type":"Entry","createdAt":"2020-12-18T09:33:08.465Z","updatedAt":"2020-12-18T09:33:08.465Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":5,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Old Data Fetching Example with Next.js","language":"JavaScript","content":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","content":[{"nodeType":"text","value":"import React from 'react'\nimport 'isomorphic-fetch'","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"export default class extends React.Component {\n static async getInitialProps () {\n const res = await fetch('https://api.company.com/user/123')\n const data = await res.json()\n return { username: data.profile.username }\n }\n}","marks":[],"data":{}}],"data":{}}]}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"Our stance of what features we transpile (like async/await) can be summed up as: we target V8's capabilities. Since our goal is code-sharing between server and client, this gives us great performance when executing the code on Node and developing on Chrome or Brave, for example.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"As you can see, the contract is very simple and unopinionated: ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"getInitialProps","nodeType":"text"},{"data":{},"marks":[],"value":" must return a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"Promise","nodeType":"text"},{"data":{},"marks":[],"value":" that resolves to a `JavaScript` object, which then populates the component's ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"props","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"This makes Next.js play well with REST APIs, GraphQL, and even global-state management libraries Redux, an example of which you can find ","nodeType":"text"},{"data":{"uri":"https://github.com/vercel/next.js/tree/canary/examples/with-redux"},"content":[{"data":{},"marks":[],"value":"on our GitHub","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"The same method allows for different data to be loaded depending on whether the component is server-rendered or dynamically rendered through client-side routing:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"3LwMFdBMIkTYFOXZAMtCpl","type":"Entry","createdAt":"2020-12-18T09:33:55.541Z","updatedAt":"2020-12-18T09:34:03.805Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":8,"revision":2,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"Getting Initial Props with Next.js for SSR Page","language":"JavaScript","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"static async getInitialProps ({ res }) {\n return res\n ? { userAgent: res.headers['user-agent'] }\n : { userAgent: navigator.userAgent }\n}","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Anticipation is the key to performance","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"We think that the pendulum of \"fully server-rendered\" swung abruptly to the extreme of \"single page app\" / \"nothing server-rendered\" thanks to the ability to ","nodeType":"text"},{"data":{"uri":"http://rauchg.com/2014/7-principles-of-rich-web-applications/#act-immediately-on-user-input"},"content":[{"data":{},"marks":[],"value":"give the user immediate feedback","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" despite the network, provided the entire app has been loaded.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"For ","nodeType":"text"},{"data":{"uri":"https://vercel.com/"},"content":[{"data":{},"marks":[],"value":"www.vercel.com","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" we've implemented a technique on top of Next.js that brings us the best of both worlds: every single ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"","nodeType":"text"},{"data":{},"marks":[],"value":" tag pre-fetches the component's JSON representation on the background, via a ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"ServiceWorker","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"If you navigate around, odds are that by the time you follow a link or trigger a route transition, the component has already been fetched.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Furthermore, since the data is fetched by a dedicated method (","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"getInitialProps","nodeType":"text"},{"data":{},"marks":[],"value":"), we can pre-fetch aggressively without triggering unnecessary server load or data fetching. This is a substantial benefit over naive web 1.0 preload strategies.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Simple deployment","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"We created Next.js because we believe universal isomorphic applications are a big part of the future of the web.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Ahead-of-time bundling and compilation (anticipation) is a critical part of effective and performant deployment.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"All it takes to deploy a Next.js app is to run ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"next build","nodeType":"text"},{"data":{},"marks":[],"value":" followed by ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"next start","nodeType":"text"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"When using ","nodeType":"text"},{"data":{"uri":"https://vercel.com/home"},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":", your ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"package.json","nodeType":"text"},{"data":{},"marks":[],"value":" looks like this:","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"metadata":{"tags":[],"concepts":[]},"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"e5382hct74si"}},"id":"1ucQZeewk9jiSR6FcqaSY7","type":"Entry","createdAt":"2020-12-18T09:35:13.768Z","updatedAt":"2020-12-18T09:35:13.768Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment"}},"publishedVersion":6,"revision":1,"contentType":{"sys":{"type":"Link","linkType":"ContentType","id":"code"}},"locale":"en-US"},"fields":{"name":"A package.json Example for Next.js","language":"JSON","content":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"{\n \"name\": \"my-app\",\n \"dependencies\": {\n \"next\": \"*\"\n },\n \"scripts\": {\n \"dev\": \"next\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n }\n}","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"content":[],"nodeType":"embedded-entry-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"Then you can simply invoke ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"vercel","nodeType":"text"},{"data":{},"marks":[],"value":" to deploy.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"In closing, this is our contribution to this very interesting problem. We think it strikes a good balance between flexibility and smart defaults, but it's certainly not a solution to every problem.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"We look forward to, in the coming weeks, discussing and featuring other great approaches to accomplish this mission, like ","nodeType":"text"},{"data":{"uri":"https://github.com/vuejs/vue-hackernews-2.0"},"content":[{"data":{},"marks":[],"value":"Vue.JS","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":", ","nodeType":"text"},{"data":{"uri":"https://github.com/gatsbyjs/gatsby"},"content":[{"data":{},"marks":[],"value":"Gatsby","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":", ","nodeType":"text"},{"data":{"uri":"https://ember-fastboot.com/"},"content":[{"data":{},"marks":[],"value":"Ember+Fastboot","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" and many others.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"If you're interested in contributing, please check out our issues and explore and debate 🚲 ","nodeType":"text"},{"data":{"uri":"https://github.com/zeit/next.js/blob/1.2.3/README.md#future-directions"},"content":[{"data":{},"marks":[],"value":"future directions","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":".","nodeType":"text"}],"nodeType":"paragraph"}]},"ogDescription":"We're very proud to open-source Next.js, a small framework for server-rendered universal JavaScript webapps.","date":"2016-10-25","authors":[{"name":"Naoyuki Kanezawa","avatar":{"title":"Naoyuki Kanezawa (128x128)","url":"https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/1W9VSC3dPzvRXnojpFunob/7db2daeba21df8f8b0f7a82eab9c6868/naoyuki-kanezawa-128.jpg","width":127,"height":127,"fileName":"naoyuki-kanezawa-128.jpg","contentType":"image/jpeg"},"vercelUsername":"nkzawa","twitterUsername":"nkzawa","vercelian":true,"isDraft":false},{"name":"Guillermo Rauch","avatar":{"title":"Guillermo Rauch (128x128)","url":"https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/27XHQudM8gCc2byKwFFMCT/5d8a8aa70d60c49020d13eee568d8103/guillermo-rauch-128.jpg","width":127,"height":127,"fileName":"guillermo-rauch-128.jpg","contentType":"image/jpeg"},"vercelUsername":"rauch-g","twitterUsername":"rauchg","vercelian":true,"role":"CEO and Founder, Vercel ","isDraft":false},{"name":"Tony Kovanen","avatar":{"title":"Tony Kovanen (128x128)","url":"https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/2UiMU1Z6oT9NWw0N1jn3qR/a38384110ff30effa0c9be9c86c367cd/tony-kovanen-128.jpg","width":127,"height":127,"fileName":"tony-kovanen-128.jpg","contentType":"image/jpeg"},"vercelUsername":"rase-","twitterUsername":"tonykovanen","vercelian":false,"isDraft":false}],"isDraft":false,"sysId":"gWfvJRybEUMFP9VP8QwWF","contentfulStatus":"published"}]}],"$L9e"]}]]]

What have we shipped?

Blog, page 44

Next.js 2.0

Next.js