2c:null 2d:["$","title",null,{"children":"Next.js release cycles | Davo Galavotti | Observable"}] 32:T6a0,# Next.js release cycles ##### Release Timeline and Gap Analysis
This **timeline visualization** shows the **Next.js releases** from **version 5** to the upcoming **version 15**, along with the gaps between each release, **represented as days**. Made by [@pixelbeat](https://x.com/pixelbeat) during [Vercel SHIP](https://vercel.com/ship) using Observable & Claude.

Observations

Consistent early releases: **Versions 5-9** had steady gaps of **3-5 months**.
Irregular recent releases: From **version 10**, gaps varied from a **few months** to **over a year**.
Longest gap: **366 days** between **v14** and **v13**, suggesting significant changes.
Shortest gap: **209 days** between v15 (Release Candidate) and v14, but final v15 date may change.
Insight: Knowing release patterns helps developers plan projects and set expectations.

The timeline reveals insights into release consistency, irregularity, and gap durations.

It prompts curiosity about the reasons behind the patterns and their impact on the Next.js community.

Data

[endoflife.date/nextjs](https://endoflife.date/nextjs)
[gh.com/vercel/next.js/releases](https://github.com/vercel/next.js/releases)
[npmjs/package/next](https://www.npmjs.com/package/next)

Version Chart uses

Timeline Curve by [@mizinov/timeline-en](https://observablehq.com/@mizinov/timeline-en)
Dark Mode by [@jerryjappinen/dark-mode](https://observablehq.com/@jerryjappinen/dark-mode)

33:T26a0,function* versionChart( data, { marginTop = 8, marginRight = 8, marginBottom = 8, marginLeft = 48, chartWidth = width - marginLeft - marginRight, chartHeight = ((chartWidth * 0.6 - marginBottom - marginTop) / 3) * 4, curvePadding = 48, turns = 2, grid = false, nice = false } = {} ) { const strokes = new Array(Math.ceil(chartHeight / 20)); function getQuarterYear(date) { const quarter = Math.floor((date.getMonth() + 3) / 3); const year = date.getFullYear().toString().slice(-2); return `Q${quarter}${year}`; } const nextLogo = d3 .select(document.createElementNS("http://www.w3.org/2000/svg", "svg")) .attr("viewBox", "0 0 120 25") .attr("width", "120") .attr("height", "25") .html( `` ); const svg = d3 .select(DOM.svg(chartWidth, chartHeight)) .append("svg") .attr("id", "graph") .style("width", chartWidth) .style("height", chartHeight) .style("padding", 0) .style("margin", 0) .style("overflow-x", "auto") .style("filter", darkMode ? "invert(1)" : "invert(0)"); svg .append("rect") .classed("back", true) .attr("width", chartWidth - marginLeft) .attr("height", chartHeight - marginBottom) .attr("fill", "#f9f9f9") .attr("rx", 8); const nextLogoWidth = 120; // Width of the nextLogo const xPos = 24; // 10 pixels padding from the right // Append a group to the main SVG and translate it to the right const g = svg.append("g").attr("transform", `translate(${xPos}, 24)`); g.node().appendChild(nextLogo.node()); // Append graph title g.append("g") .classed("title", true) .append("text") .attr("x", nextLogoWidth + 24) .attr("y", 24) .attr("text-anchor", "start") .attr("font-family", "Geist, Inter, sans-serif") .attr("font-weight", 600) .attr("font-size", 14) .attr("letter-spacing", "-0.5") .attr("fill", "#000") .text("Versions over Days Since Previous Release"); // Append author details g.append("g") .classed("credit", true) .append("text") .attr("x", 12) .attr("y", chartHeight - 48) .attr("text-anchor", "start") .attr("font-family", "Geist, Inter, sans-serif") .attr("font-weight", 600) .attr("font-size", 13) .attr("letter-spacing", "-0.5") .attr("fill", "#000") .text( "Made by @pixelbeat during Vercel SHIP, NYC, May 23/24 - Updated on Nov 25/24" ); if (grid) { svg .append("g") .classed("grid", true) .selectAll("rect") .data(strokes) .join("rect") .attr("y", (d, i) => i * 20) .attr("width", chartWidth) .attr("height", 10) .attr("fill", "rgba(255, 0, 0, 0.1)"); svg .append("g") .classed("margin", true) .selectAll("rect") .data([1, 2, 3, 4]) .join("rect") .attr("x", (d) => (d !== 3 ? 0 : chartWidth - marginLeft - marginRight)) .attr("y", (d) => (d !== 4 ? 0 : chartHeight - marginTop - marginBottom)) .attr("width", (d) => d % 2 === 0 ? chartWidth : marginLeft + marginRight ) .attr("height", (d) => d % 2 === 0 ? marginTop + marginBottom : chartHeight ) .attr("fill", "rgba(0, 0, 255, 0.1)"); } const path = svg .append("path") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr( "d", curveGenerator({ width: width, height: chartHeight, padding: curvePadding, turns: turns }) ); // chartWidth, chartHeight, curvePadding, turns const [minDate, maxDate] = d3.extent(data, (d) => d["Release Date"]); const minYear = d3.timeYear.floor(minDate); const maxYear = d3.timeYear.ceil(maxDate); const point = d3 .scaleTime() .domain([minYear, maxYear]) .range([0, path.node().getTotalLength()]); if (nice) { point.nice(); } svg .append("g") .classed("ticks", true) .selectAll("circle") .data(point.ticks()) .join("circle") .attr("r", 2) .attr("cx", (d) => path.node().getPointAtLength(point(d)).x) .attr("cy", (d) => path.node().getPointAtLength(point(d)).y) .attr("fill", "#000") .attr("stroke", "none"); svg .append("g") .classed("tick-labels", true) .selectAll("text") .data(point.ticks()) .join("text") .attr("x", (d) => path.node().getPointAtLength(point(d)).x) .attr("y", (d) => path.node().getPointAtLength(point(d)).y - 10) .attr("text-anchor", "middle") .attr("font-family", "Geist, Inter, sans-serif") .attr("font-weight", 600) .attr("font-size", 10) .text((d) => d.getFullYear()); const radiusScale = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d["Days Since Previous Release"])]) .range([12, 32]); svg .append("g") .classed("release", true) .selectAll("rect") .data(data) .join("rect") .attr( "x", (d) => path.node().getPointAtLength(point(d["Release Date"])).x - 24 ) .attr( "y", (d) => path.node().getPointAtLength(point(d["Release Date"])).y - 24 ) .attr("width", 48) .attr("height", 48) .attr("rx", 8) .attr("fill", "#fff") .attr("stroke", "#000") .attr("stroke-width", 2); svg .selectAll(".release") .selectAll("line") .data(data) .join("line") .attr( "x1", (d) => path.node().getPointAtLength(point(d["Release Date"])).x - 24 ) .attr( "y1", (d) => path.node().getPointAtLength(point(d["Release Date"])).y - 24 + 48 * (1.88 / 3) ) .attr( "x2", (d) => path.node().getPointAtLength(point(d["Release Date"])).x + 24 ) .attr( "y2", (d) => path.node().getPointAtLength(point(d["Release Date"])).y - 24 + 48 * (1.88 / 3) ) .attr("stroke", "#000") .attr("stroke-width", 1); svg .append("g") .classed("release-label", true) .selectAll("text") .data(data) .join("text") .attr("x", (d) => path.node().getPointAtLength(point(d["Release Date"])).x) .attr( "y", (d) => path.node().getPointAtLength(point(d["Release Date"])).y - 8 ) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("font-family", "Geist, Inter, sans-serif") .attr("font-size", 16) .attr("font-weight", 600) .attr("letter-spacing", "-0.5") .attr("fill", "#000") .text((d) => d.Version); svg .append("g") .classed("days-between", true) .selectAll("text") .data(data) .join("text") .attr("x", (d) => path.node().getPointAtLength(point(d["Release Date"])).x) .attr( "y", (d) => path.node().getPointAtLength(point(d["Release Date"])).y + 15 ) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("font-family", "Geist, Inter, sans-serif") .attr("font-size", 10) .attr("font-weight", 600) .attr("letter-spacing", "-0.5") .attr("fill", "#000") .text((d) => d["Days Since Previous Release"]); svg .append("g") .classed("date", true) .selectAll("text") .data(data) .join("text") .attr("x", (d) => path.node().getPointAtLength(point(d["Release Date"])).x) .attr( "y", (d) => path.node().getPointAtLength(point(d["Release Date"])).y - 32 ) .attr("paint-order", "stroke") .attr("stroke-linejoin", "round") .attr("stroke-width", 4) .attr("stroke", "#f9f9f9") .attr("fill", "#000") .attr("font-family", "Geist, Inter, sans-serif") .attr("font-weight", 600) .attr("font-size", 10) .attr("text-anchor", "middle") .text((d) => getQuarterYear(new Date(d["Release Date"]))); yield svg.attr("viewBox", autoBox).node(); }34:[] 30:{"id":"a859fe21ebcd8e5e","slug":"next-js-release-cycles","title":"Next.js release cycles","thumbnail":"f9f021477c6a977bb0fb8ff7adcad9f978e62a1e8a8c6ff89bd7ac60fbfe30ac","access_level":"public","create_time":"$D2024-05-24T15:27:42.039Z","update_time":"$D2024-12-04T16:28:11.779Z","view_time":null,"first_public_time":"$D2024-05-24T15:27:42.039Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"8a3c54c8b734990d","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":"starter_2024"},"version":1152,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3541aee6537ad20c","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":null}],"members":[{"type":"individual","id":"3541aee6537ad20c","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":null,"role":"editor"},{"type":"team","id":"8a3c54c8b734990d","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Next.js release cycles","cells":[{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"versionGraph = versionChart(versionData, {\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0,\n marginLeft: 0,\n curvePadding: 128,\n turns: 4,\n grid: false,\n darkMode: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"---\n### Data & Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":875,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"versionData = {\n const parseDate = d3.timeParse(\"%Y-%m-%d\");\n\n return d3.csvParse(\n `Version,Release Date,Days Since Previous Release\n 15,2024-10-21,151\n 15 RC,2024-05-23,209\n 14,2023-10-26,366\n 13,2022-10-25,364\n 12,2021-10-26,133\n 11,2021-06-15,231\n 10,2020-10-27,476\n 9,2019-07-08,147\n 8,2019-02-11,145\n 7,2018-09-19,126\n 6,2018-05-16,100\n 5,2018-02-05,100`,\n (d) => {\n d[\"Release Date\"] = parseDate(d[\"Release Date\"]);\n d[\"Days Since Previous Release\"] = +d[\"Days Since Previous Release\"];\n return d;\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"function curveGenerator({\n width = 1280,\n height = 720,\n padding = 24,\n turns = 1\n} = {}) {\n const m = padding;\n const r = turns === 0 ? 0 : (height - 2 * m) / (2 * turns);\n const t = m + r;\n const d = 2 * r;\n\n let curve = `M ${m} ${m} L ${width - t} ${m}`;\n\n for (let i = 1; i <= turns; i++) {\n const dx = i === turns ? m : t;\n const y = m + i * d;\n\n if (i % 2 === 0) {\n curve += `A ${r} ${r} 0 0 0 ${t} ${y} L ${width - dx} ${y}`;\n } else {\n curve += `A ${r} ${r} 0 0 1 ${width - t} ${y} L ${dx} ${y}`;\n }\n }\n\n return curve;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"function autoBox() {\n document.body.appendChild(this);\n const { x, y, width, height } = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"import { darkMode } from \"@jerryjappinen/dark-mode\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"