Chapter 199: getStaticFiles()

Core Idea

<AvailableFrom v="3. 3.

Key Concepts

• API
• Maximum files
• Compatibility
• See also

Code Examples

const files = getStaticFiles();
/*
[
  {
    "name": "video.mp4",
    "src": "/static-7n5spa/video.mp4",
    "sizeInBytes": 432944,
    "lastModified": 1670170466865
  },
  {
    "name": "assets/data.json",
    "src": "/static-7n5spa/assets/data.json",
    "sizeInBytes": 1311,
    "lastModified": 1670170486089
  },
]
*/

// ❗ Don't pass the `name` directly to the `src` of a media element
const videoName = files[0].name;

// ✅ Wrap it in staticFile() instead or use `src`
const videoSrc = files[0].src;

// Find a file by its name and import it
const data = files.find((f) => {
  return f.name === 'video.mp4';
}) as StaticFile; // Use `as StaticFile` to assert the file exists

// Use the `src` property to get a src to pass to a media element
<Video src={data.src} />;

• What it demonstrates: Usage pattern for getStaticFiles() from the official docs.

Key Takeaways

1. Understand api when working with getStaticFiles().
2. Understand maximum files when working with getStaticFiles().
3. Understand compatibility when working with getStaticFiles().
4. Understand see also when working with getStaticFiles().

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.