simenandre / next-theme-ui

Makes it easier to combine NextJS with Theme UI! 🖍️

Theme-UI Components for Next.js

This package contains a few small components to help using Theme UI with Next.js.

Specifically, this means <Link> and <NavLink>. If you use the components from this package, the components will be using <Link /> components from next/link instead of a regular <a />.

Quickstart

▶ yarn add next-theme-ui

Replace these imports:

import { Link } from '@theme-ui/components';
import { NavLink } from '@theme-ui/components';

with

import { Link } from 'next-theme-ui';
import { NavLink } from 'next-theme-ui';

Contribute

Please open issues if you have questions or issues. I'm trying to keep this package as small as possible, so before adding any components, please open an issue we can discuss.

next-theme-ui's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	@cobraz/prettier-config

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency next to v14 [security]
• chore(deps): update actions/checkout digest to 692973e
• chore(deps): update dependency @theme-ui/components to ^0.16.0
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @bjerk/eslint-config to v6
• chore(deps): update dependency @tsconfig/next to v2
• chore(deps): update github/codeql-action action to v3
• chore(deps): update google-github-actions/release-please-action action to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/codeql-analysis.yml

• actions/checkout v4@3df4ab11eba7bda6032a0b82a6bb43b11571feac
• github/codeql-action v2
• github/codeql-action v2
• github/codeql-action v2

.github/workflows/pull_request.yml

• actions/checkout v4@3df4ab11eba7bda6032a0b82a6bb43b11571feac
• actions/setup-node v3

.github/workflows/push.yml

• actions/checkout v4@3df4ab11eba7bda6032a0b82a6bb43b11571feac
• google-github-actions/release-please-action v3
• actions/setup-node v3

npm

package.json

• @bjerk/eslint-config ^4.0.0
• @cobraz/prettier-config ^1.0.1
• @theme-ui/components ^0.15.0
• @tsconfig/next ^1.0.0
• @types/react ^18.0.0
• next ^13.0.0
• react ^18.0.0
• typescript ^5.0.0
• @theme-ui/components ^0.15.0
• next ^13.0.0
• react ^18.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Image not passing `loader` and `layout` props correctly to Next Image

Describe the bug
The loader attribute is not applied to next-theme-ui's Image correctly. Next throws an error:

Unhandled Runtime Error
Error: Image with src "/customers/grid-branding.svg" is missing "loader" prop.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader

To Reproduce
Steps to reproduce the behavior:

1. Create a Next project
2. Create a custom imageLoader and set up custom loader configuration in next.config.js
3. Use the Image component from next-theme-ui
4. Set the loader attribute on your image

Expected behavior
I would expect the app to load my images correctly using the custom loader, as they do just fine with the normal Next Image

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version Version 98.0.4758.80 (Official Build) (arm64)

Additional context
This is my loader:

export const imageLoader: ImageLoader = ({ src }) => {
  return src;
};

It works just fine with the standard Next Image (but then I can't use sx