Update Local Images Example to Use Assets Folder (#47878)
This pull request updates the Local Images example in the Next.js
documentation to use an ``assets`` folder inside the ``src`` directory
instead of the ``public`` folder. The changes are made to emphasize the
recommended practice of organizing and importing static assets when
using the Next.js ``Image`` component.
The previous example could cause confusion as it suggested importing
images from the ``public`` folder, which is generally used for static
files that can be accessed directly via a URL. However, when using the
Next.js ``Image`` component, it is recommended to import images as
modules and store them in a folder like ``assets`` inside the ``src``
directory. This approach allows the Image component to optimize images
and prevent Cumulative Layout Shift while loading.
This PR changes the image import statements as the example below:
```jsx
import profilePic from '@/assets/me.png';
```
These changes aim to provide clearer guidance on how to handle local
images. To avoid misunderstandings while the developer follows the
documentation.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
