Skip to content

Instantly share code, notes, and snippets.

@doguscancalli
Created September 16, 2023 12:19
Show Gist options
  • Save doguscancalli/4ccb099d42fa27d3ecaec1120fa5c4b9 to your computer and use it in GitHub Desktop.
Save doguscancalli/4ccb099d42fa27d3ecaec1120fa5c4b9 to your computer and use it in GitHub Desktop.
Resolving Asset Access Issue in Next.js 13 with i18n and Public Folder

Issue: Unable to Access Assets in the Public Folder Directory with Next.js 13 and i18n

Problem Description

When working with internationalization (i18n) in Next.js 13 within the app directory, there is an issue where assets in the public folder directory cannot be accessed.

Solution

To resolve this issue, follow these steps:

  1. Define a regular expression pattern to match all file extensions:
    const PUBLIC_FILE = /\.(.*)$/
  2. Modify your middleware function to include a check for public files using the PUBLIC_FILE pattern. If a match is found, skip further processing:
    if (PUBLIC_FILE.test(req.nextUrl.pathname)) return

By implementing these changes, you will be able to access assets in the public folder directory when working with Next.js 13 and i18n.

Credits

Special thanks to the Stack Overflow user who provided this solution: Answer Link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment