Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/docs/en/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ editUrl: false
next: false
banner:
content: |
Astro v5 is here! <a href="/en/guides/upgrade-to/v5/">Learn how to upgrade your site</a>
Astro v6 is here! <a href="/en/guides/upgrade-to/v6/">Learn how to upgrade your site</a>
hero:
title: Astro Docs
tagline: Guides, resources, and API references to help you build with Astro.
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/deploy/microsoft-azure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ The GitHub action yaml that is created for you assumes the use of node 14. This

```
"engines": {
"node": ">=18.0.0"
"node": ">=22.12.0"
},
```

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/deploy/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ You can also create a new site on Netlify and link up your Git repository by ins

### Set a Node.js version

If you are using a legacy [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires `v18.20.8` or `v20.3.0` or higher.
If you are using a legacy [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires `v22.12.0` or higher.

You can [specify your Node.js version in Netlify](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) using:
- a [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) file in your base directory.
Expand Down
10 changes: 3 additions & 7 deletions src/content/docs/en/guides/internationalization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -170,15 +170,11 @@ Set this option when all routes will have their `/locale/` prefix in their URL a

- URLs without a locale prefix, (e.g. `example.com/about/`) will return a 404 (not found) status code unless you specify a [fallback strategy](#fallback).

### `redirectToDefaultLocale`
#### Opting out of redirects for the home URL

<p><Since v="4.2.0" /></p>
Even with your default locale routes prefixed, this behaviour does not apply by default to your site's index page. This allows you to have a home page that exists outside of your configured locale structure, where all of your localized routes are prefixed except the home URL of your site.

Configures whether or not the home URL (`/`) generated by `src/pages/index.astro` will redirect to `/<defaultLocale>`.

Setting `prefixDefaultLocale: true` will also automatically set `redirectToDefaultLocale: true` in your `routing` config object. By default, the required `src/pages/index.astro` file will automatically redirect to the index page of your default locale.

You can opt out of this behavior by [setting `redirectToDefaultLocale: false`](/en/reference/configuration-reference/#i18nroutingredirecttodefaultlocale). This allows you to have a site home page that exists outside of your configured locale folder structure.
You can opt out of this behavior so that your main site URL will also redirect to a prefixed, localized route for your default locale. When `prefixDefaultLocale: true` is set, you can additionally configure `redirectToDefaultLocale: true`. This will ensure that the home URL (`/`) generated by `src/pages/index.astro` will redirect to `/[defaultLocale]/`.

### `manual`

Expand Down
224 changes: 224 additions & 0 deletions src/content/docs/en/guides/upgrade-to/v6.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
---
title: Upgrade to Astro v6
description: How to upgrade your project to Astro v6.0.
sidebar:
label: v6.0
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro'
import SourcePR from '~/components/SourcePR.astro'

This guide will help you migrate from Astro v5 to Astro v6.

Need to upgrade an older project to v5 first? See our [older migration guide](/en/guides/upgrade-to/v5/).

Need to see the v5 docs? Visit this [older version of the docs site (unmaintained v5.xx snapshot)](https://v5.docs.astro.build/).

## Upgrade Astro

Update your project's version of Astro to the latest version using your package manager:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
# Upgrade Astro and official integrations together
npx @astrojs/upgrade
```
</Fragment>
<Fragment slot="pnpm">
```shell
# Upgrade Astro and official integrations together
pnpm dlx @astrojs/upgrade
```
</Fragment>
<Fragment slot="yarn">
```shell
# Upgrade Astro and official integrations together
yarn dlx @astrojs/upgrade
```
</Fragment>
</PackageManagerTabs>

You can also [upgrade your Astro integrations manually](/en/guides/integrations-guide/#manual-upgrading) if needed, and you may also need to upgrade other dependencies in your project.

:::note[Need to continue?]
After upgrading Astro, you may not need to make any changes to your project at all!

But, if you notice errors or unexpected behavior, please check below for what has changed that might need updating in your project.
:::

Astro v6.0 includes [potentially breaking changes](#breaking-changes), as well as the removal and deprecation of some features.

If your project doesn't work as expected after upgrading to v6.0, check this guide for an overview of all breaking changes and instructions on how to update your codebase.

See [the Astro changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) for full release notes.

## Dependency Upgrades

Any major upgrades to Astro's dependencies may cause breaking changes in your project.

### Node 22

<SourcePR number="14427" title="feat!: drop node 18 and 20"/>

Node 18 reached its End of Life in March 2025 and Node 20 is scheduled to reach its End of Life in April 2026.

Astro v6.0 drops Node 18 and Node 20 support entirely so that all Astro users can take advantage of Node's more modern features.

#### What should I do?

Check that both your development environment and your deployment environment are using **Node `22.12.0` or higher**.

<Steps>
1. Check your local version of Node using:

```sh
node -v
```

2. Check your [deployment environment's](/en/guides/deploy/) own documentation to verify that they support Node 22.

You can specify Node `22.12.0` for your Astro project either in a dashboard configuration setting or a `.nvmrc` file.

```bash title=".nvmrc"
22.12.0
```
</Steps>

## Legacy

The following features are now considered legacy features. They should function normally but are no longer recommended and are in maintenance mode. They will see no future improvements and documentation will not be updated. These features will eventually be deprecated, and then removed entirely.

## Deprecated

The following deprecated features are no longer supported and are no longer documented. Please update your project accordingly.

Some deprecated features may temporarily continue to function until they are completely removed. Others may silently have no effect, or throw an error prompting you to update your code.

## Removed

The following features have now been entirely removed from the code base and can no longer be used. Some of these features may have continued to work in your project even after deprecation. Others may have silently had no effect.

Projects now containing these removed features will be unable to build, and there will no longer be any supporting documentation prompting you to remove these features.

### Removed: `<ViewTransitions />` component

<SourcePR number="14400" title="Remove deprecated ViewTransitions component"/>

In Astro 5.0, the `<ViewTransitions />` component was renamed to `<ClientRouter />` to clarify the role of the component. The new name makes it more clear that the features you get from Astro's `<ClientRouter />` routing component are slightly different from the native CSS-based MPA router. However, a deprecated version of the `<ViewTransitions />` component still existed and may have functioned in Astro 5.x.

Astro 6.0 removes the `<ViewTransitions />` component entirely and it can no longer be used in your project. Update to the `<ClientRouter />` component to continue to use these features.

#### What should I do?

Replace all occurrences of the `ViewTransitions` import and component with `ClientRouter`:

```astro title="src/layouts/MyLayout.astro" del={1,7} ins={2,8}
import { ViewTransitions } from 'astro:transitions';
import { ClientRouter } from 'astro:transitions';

<html>
<head>
...
<ViewTransitions />
<ClientRouter />
</head>
</html>
```

<ReadMore>Read more about [view transitions and client-side routing in Astro](/en/guides/view-transitions/).</ReadMore>

### Removed: `emitESMImage()`

<SourcePR number="14426" title="feat!: remove emitESMImage()"/>

In Astro 5.6.2, the `emitESMImage()` function was deprecated in favor of `emitImageMetadata()`, which removes two deprecated arguments that were not meant to be exposed for public use: `_watchMode` and `experimentalSvgEnabled`.

Astro 6.0 removes `emitESMImage()` entirely. Update to `emitImageMetadata()` to keep your current behavior.

#### What should I do?

Replace all occurrences of the `emitESMImage()` with `emitImageMetadata()` and remove unused arguments:

```ts del={1,5} ins={2,6}
import { emitESMImage } from 'astro/assets/utils';
import { emitImageMetadata } from 'astro/assets/utils';

const imageId = '/images/photo.jpg';
const result = await emitESMImage(imageId, false, false);
const result = await emitImageMetadata(imageId);
```

<ReadMore>Read more about [`emitImageMetadata()`](/en/reference/image-service-reference/#emitimagemetadata).</ReadMore>

### Removed: `Astro.glob()`

<SourcePR number="14421" title="feat!: remove Astro.glob"/>

In Astro 5.0, `Astro.glob()` was deprecated in favor of using `getCollection()` to query your collections, and `import.meta.glob()` to query other source files in your project.

Astro 6.0 removes `Astro.glob()` entirely. Update to `import.meta.glob()` to keep your current behavior.

#### What should I do?

Replace all use of `Astro.glob()` with `import.meta.glob()`. Note that `import.meta.glob()` no longer returns a `Promise`, so you may have to update your code accordingly. You should not require any updates to your [glob patterns](/en/guides/imports/#glob-patterns).

```astro title="src/pages/blog.astro" del={2} ins={3}
---
const posts = await Astro.glob('./posts/*.md');
const posts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
---

{posts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
```

Where appropriate, consider using [content collections](/en/guides/content-collections/) to organize your content, which has its own newer, more performant querying functions.

You may also wish to consider using glob packages from NPM, such as [`fast-glob`](https://www.npmjs.com/package/fast-glob).

<ReadMore>Learn more about [importing files with `import.meta.glob`](/en/guides/imports/#importmetaglob).</ReadMore>

## Changed Defaults

Some default behavior has changed in Astro v5.0 and your project code may need updating to account for these changes.

In most cases, the only action needed is to review your existing project's deployment and ensure that it continues to function as you expect, making updates to your code as necessary. In some cases, there may be a configuration setting to allow you to continue to use the previous default behavior.

### Changed: `i18n.routing.redirectToDefaultLocale` default value

In Astro v5.0, the `i18n.routing.redirectToDefaultLocale` default value was `true`. When combined with the `i18n.routing.prefixDefaultLocale` default value of `false`, the resulting redirects could cause infinite loops.

In Astro v6.0, `i18n.routing.redirectToDefaultLocale` now defaults to `false`. Additionally, it can now only be used if `i18n.routing.prefixDefaultLocale` is set to `true`.

#### What should I do?

Review your Astro `i18n` config as you may now need to explicitly set values for `redirectToDefaultLocale` and `prefixDefaultLocale` to recreate your project's previous behavior.

```js ins={7} title="astro.config.mjs"
import { defineConfig } from 'astro/config';

export default defineConfig({
i18n: {
routing: {
prefixDefaultLocale: true,
redirectToDefaultLocale: true
}
}
})
```

<ReadMore>Learn more about [Internationalization routing](/en/guides/internationalization/#routing).</ReadMore>

## Breaking Changes

The following changes are considered breaking changes in Astro v5.0. Breaking changes may or may not provide temporary backwards compatibility. If you were using these features, you may have to update your code as recommended in each entry.

## Community Resources

Know a good resource for Astro v5.0? [Edit this page](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/upgrade-to/v6.mdx) and add a link below!

## Known Issues

Please check [Astro's issues on GitHub](https://github.com/withastro/astro/issues/) for any reported issues, or to file an issue yourself.
2 changes: 1 addition & 1 deletion src/content/docs/en/install-and-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Prefer to try Astro in your browser? Visit [astro.new](https://astro.new/) to br

## Prerequisites

- **Node.js** - `v18.20.8` or `v20.3.0`, `v22.0.0` or higher. ( `v19` and `v21` are not supported.)
- **Node.js** - `v22.12.0` or higher. Odd-numbered versions like `v23` are not supported.
- **Text editor** - We recommend [VS Code](https://code.visualstudio.com/) with our [Official Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminal** - Astro is accessed through its command-line interface (CLI).

Expand Down
115 changes: 0 additions & 115 deletions src/content/docs/en/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1048,118 +1048,3 @@ Loads a session by ID. In normal use, a session is loaded automatically from the
</TabItem>

</Tabs>


### Deprecated object properties

#### `Astro.glob()`

:::caution[Deprecated in v5.0]
Use [Vite's `import.meta.glob`](https://vite.dev/guide/features.html#glob-import) to query project files.

`Astro.glob('../pages/post/*.md')` can be replaced with:

`Object.values(import.meta.glob('../pages/post/*.md', { eager: true }));`

See the [imports guide](/en/guides/imports/#importmetaglob) for more information and usage.
:::

`Astro.glob()` is a way to load many local files into your static site setup.

```astro
---
// src/components/my-component.astro
const posts = await Astro.glob('../pages/post/*.md'); // returns an array of posts that live at ./src/pages/post/*.md
---

<div>
{posts.slice(0, 3).map((post) => (
<article>
<h2>{post.frontmatter.title}</h2>
<p>{post.frontmatter.description}</p>
<a href={post.url}>Read more</a>
</article>
))}
</div>
```

`.glob()` only takes one parameter: a relative URL glob of which local files you'd like to import. It’s asynchronous and returns an array of the exports from matching files.

`.glob()` can't take variables or strings that interpolate them, as they aren't statically analyzable. (See [the imports guide](/en/guides/imports/#supported-values) for a workaround.) This is because `Astro.glob()` is a wrapper of Vite's [`import.meta.glob()`](https://vite.dev/guide/features.html#glob-import).

:::note
You can also use `import.meta.glob()` itself in your Astro project. You may want to do this when:
- You need this feature in a file that isn't `.astro`, like an API route. `Astro.glob()` is only available in `.astro` files, while `import.meta.glob()` is available anywhere in the project.
- You don't want to load each file immediately. `import.meta.glob()` can return functions that import the file content, rather than returning the content itself. Note that this import includes all styles and scripts for any imported files. These will be bundled and added to the page whether or not a file is actually used, as this is decided by static analysis, not at runtime.
- You want access to each file's path. `import.meta.glob()` returns a map of a file's path to its content, while `Astro.glob()` returns a list of content.
- You want to pass multiple patterns; for example, you want to add a "negative pattern" that filters out certain files. `import.meta.glob()` can optionally take an array of glob strings, rather than a single string.

Read more in the [Vite documentation](https://vite.dev/guide/features.html#glob-import).
:::

##### Markdown Files

Markdown files loaded with `Astro.glob()` return the following `MarkdownInstance` interface:

```ts
export interface MarkdownInstance<T extends Record<string, any>> {
/* Any data specified in this file's YAML/TOML frontmatter */
frontmatter: T;
/* The absolute file path of this file */
file: string;
/* The rendered path of this file */
url: string | undefined;
/* Astro Component that renders the contents of this file */
Content: AstroComponentFactory;
/** (Markdown only) Raw Markdown file content, excluding layout HTML and YAML/TOML frontmatter */
rawContent(): string;
/** (Markdown only) Markdown file compiled to HTML, excluding layout HTML */
compiledContent(): string;
/* Function that returns an array of the h1...h6 elements in this file */
getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
default: AstroComponentFactory;
}
```

You can optionally provide a type for the `frontmatter` variable using a TypeScript generic.

```astro
---
interface Frontmatter {
title: string;
description?: string;
}
const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
---

<ul>
{posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>
```

##### Astro Files

Astro files have the following interface:

```ts
export interface AstroInstance {
/* The file path of this file */
file: string;
/* The URL for this file (if it is in the pages directory) */
url: string | undefined;
default: AstroComponentFactory;
}
```

##### Other Files

Other files may have various different interfaces, but `Astro.glob()` accepts a TypeScript generic if you know exactly what an unrecognized file type contains.

```ts
---
interface CustomDataFile {
default: Record<string, any>;
}
const data = await Astro.glob<CustomDataFile>('../data/**/*.js');
---
```
Loading
Loading