How to Upgrade Your Astro 6 Site to Astro 7

Upgrading takes one command. Then you build your site and fix what it complains about. For most small sites, that’s two things: HTML tags you never closed, and spaces that went missing. We did this on a real Astro 6 project. Here’s what happened.

Step 1: Save a copy first

Copy your whole project folder before you start. Name the copy something like my-site-backup. If you use Git, commit your work instead. Then you can always go back.

Step 2: Check your Node.js version

Astro 7.4.7 needs Node.js 22.23.4 or newer. We read that from the Astro package itself. Run this:

$ node -v
v24.21.0

If your number is lower than 22.23.4, get the newest LTS version from nodejs.org first. LTS means the long-lasting version.

Step 3: Run the upgrade tool

In your project folder, run:

npx @astrojs/upgrade

It asks one question, because a big version jump can break things. Pick Yes. Here’s what it showed us:

$ npx @astrojs/upgrade
astro   Integration upgrade in progress.
   ▲  astro
      will be updated  from v6.4.8 to v7.4.7
wait   One package has breaking changes. Continue?
      Yes
check   Be sure to follow the CHANGELOG.
      astro
      https://docs.astro.build/en/guides/upgrade-to/v7/
      Installing dependencies with npm...
   ✔  Installed dependencies!

That’s it for the update. Your package.json now says "astro": "^7.4.7".

Step 4: Build and read the error

Now build your site. This is where problems show up.

npm run build

Ours failed. Here is the part that matters:

$ npm run build
[content] Astro version changed
[content] Clearing content store
[content] Synced content
[build] Building static entrypoints...
[ERROR] [vite] ✗ Build failed in 26ms
[CompilerError] Expected corresponding JSX closing tag for 'li'.
Location:
  src/pages/index.astro:17:6

Don’t worry about the long words. Look at the last two lines. They name the tag, li, and the file and line, index.astro line 17.

Step 5: Close your tags

Astro 7 has a new, faster tool that reads your pages. It is stricter. Astro 6 let you skip a closing tag. Astro 7 does not.

Our page had a list like this. It worked fine on Astro 6:

<ul>
  <li>Tomatoes
  <li>Beans
</ul>

The fix is to close each one:

<ul>
  <li>Tomatoes</li>
  <li>Beans</li>
</ul>

We built again, and it failed again. This time it named a p tag. We had written <p>I write about my garden. with no </p>. We added it.

So fix one, build, and repeat. The error points to the next one each time. Tags like <br>, <img>, <hr> and <input> are fine as they are. They never need a closing tag.

$ npm run build
[build] 2 page(s) built in 280ms
[build] Complete!

Our blog post page and our content collection built with no changes at all.

Step 6: Look for missing spaces

This one is sneaky. It doesn’t cause an error. You only see it on the page.

Astro 7 handles spaces between tags in a new way. Our page had this:

<p>
  <strong>Made by</strong>
  <em>Grandpa Joe</em>
</p>

On Astro 6, it showed “Made by Grandpa Joe.” On Astro 7, it showed “Made byGrandpa Joe.” The space was gone. We checked the built files from both versions to be sure.

The fix is to add {" "} where you want a space:

<strong>Made by</strong>{" "}
<em>Grandpa Joe</em>

So open your site with npm run dev and read your pages. Look for words that run together.

Step 7: Check for HTML in the wrong place

Astro 6 quietly fixed some broken HTML for you. Astro 7 leaves it as you wrote it.

We tested this with a <div> inside a <p>. That isn’t allowed in HTML. Astro 6 moved the div out. Astro 7 kept it inside, just as we wrote it. The build did not fail. But the page can look different in the browser.

If a page looks odd after the upgrade, look for a div inside a p. Change the p to a div.

Other changes you might hit

These come from Astro’s upgrade guide. We read it on November 8, 2026. Most beginners won’t meet them, but check:

• A file named src/fetch.ts or src/fetch.js. Astro 7 now uses that name for itself. Rename yours.
• Markdown plugins. If your astro.config.mjs lists remarkPlugins or rehypePlugins, you need to install @astrojs/markdown-remark. Plain Markdown posts need nothing. Ours worked as is.
• Astro DB. The @astrojs/db package is gone. The guide lists other choices.
• An experimental section in your config. Some of those flags are now normal features. The guide says which ones to remove.

Where to go next

• Astro 7: what beginners need to know, for what’s new.
• How to fix common Astro errors.
• How to back up an Astro site, so the next upgrade is safe too.