Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added image optimization for remote and local files #15

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

DevTrav
Copy link
Contributor

@DevTrav DevTrav commented Jan 19, 2025

Changes made:

Impact

  • Added localPAtterns and remotePatterns to module.exports in next.config.ts
  • Allows the application to leverage the Image component on Vercel's framework
  • Using the Image tag instead of img, the image

@DevTrav DevTrav requested a review from a team as a code owner January 19, 2025 22:39
@DevTrav DevTrav linked an issue Jan 19, 2025 that may be closed by this pull request
next.config.mjs Outdated

export default nextConfig

module.exports = {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 why are we exporting to different configs from this file, in two different style of js modules (require and export). Seems a bit strange, but I'm not super familiar with Next's configuration.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a bit of confusion here. I have submit an update to the config file as follows:

Key changes made:

  • Changed file extension from .ts to .mjs
  • Removed TypeScript-specific syntax (as const)
  • Kept JSDoc type annotation for type checking
  • Removed localPatterns as it's not a valid property in the current Next.js image config
  • Maintained ES modules syntax with export default

Explanation for the changes:

  • Next.js configuration must be in JavaScript (.js or .mjs), not TypeScript
  • We still get type checking through JSDoc comments
  • The configuration is simpler but maintains all the necessary image optimization features
  • For local images in the public directory, no special configuration is needed - they work out of the box with the next/image component

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on our conversation in Slack, I think the current plan is to upgrade Next and change the extension for the config file back to .ts.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have assigned #13 to myself in order to revert next.config.mjs back to next.config.ts.

@DevTrav DevTrav mentioned this pull request Jan 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use image optimization from Next
2 participants