├── .eslintrc.json
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── fonts
    │   │   ├── GeistVF.woff
    │   │   └── GeistMonoVF.woff
    │   ├── page.tsx
    │   ├── globals.css
    │   └── layout.tsx
    └── components
    │   └── ImageLoadingTest.tsx
├── postcss.config.mjs
├── tailwind.config.ts
├── .gitignore
├── next.config.mjs
├── package.json
├── tsconfig.json
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/derweili/next-image-preload-test/main/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/derweili/next-image-preload-test/main/src/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/src/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/derweili/next-image-preload-test/main/src/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import ImageLoadingTest from "@/components/ImageLoadingTest";
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div className="w-[500px] mx-auto p-4">
 6 |       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
 7 |         <ImageLoadingTest />
 8 |       </main>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         background: "var(--background)",
13 |         foreground: "var(--foreground)",
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | };
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 
23 | @layer utilities {
24 |   .text-balance {
25 |     text-wrap: balance;
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 | 	images: {
 4 |     remotePatterns: [
 5 |       {
 6 |         protocol: 'https',
 7 |         hostname: 'placehold.co',
 8 |         // port: '',
 9 |         // pathname: '/account123/**',
10 |         // search: '',
11 |       },
12 |       {
13 |         protocol: 'https',
14 |         hostname: 'picsum.photos',
15 |         // port: '',
16 |         // pathname: '/account123/**',
17 |         // search: '',
18 |       },
19 |     ],
20 |   },
21 | };
22 | 
23 | export default nextConfig;
24 | 


--------------------------------------------------------------------------------
/src/components/ImageLoadingTest.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import React from 'react'
 3 | 
 4 | const ImageLoadingTest = () => {
 5 | 	return (
 6 | 		<div>
 7 | 			<h2>Priority image (should be preloaded)</h2>
 8 | 			<Image src="https://picsum.photos/seed/priority/400/300" alt="Logo" width={400} height={300} priority />
 9 | 			
10 | 			<h2 className='mt-4'>Priority image (should not get preloaded)</h2>
11 | 			<Image src="https://picsum.photos/seed/no-priority-loading-eager/400/300" alt="Logo" width={400} height={300} priority={false} loading="eager" />
12 | 		</div>
13 | 	)
14 | }
15 | 
16 | export default ImageLoadingTest


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "image-preload-test-old",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "^14.2.5",
13 |     "react": "^18",
14 |     "react-dom": "^18"
15 |   },
16 |   "devDependencies": {
17 |     "@types/node": "^20",
18 |     "@types/react": "^18",
19 |     "@types/react-dom": "^18",
20 |     "eslint": "^8",
21 |     "eslint-config-next": "14.2.21",
22 |     "postcss": "^8",
23 |     "tailwindcss": "^3.4.1",
24 |     "typescript": "^5"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import localFont from "next/font/local";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = localFont({
 6 |   src: "./fonts/GeistVF.woff",
 7 |   variable: "--font-geist-sans",
 8 |   weight: "100 900",
 9 | });
10 | const geistMono = localFont({
11 |   src: "./fonts/GeistMonoVF.woff",
12 |   variable: "--font-geist-mono",
13 |   weight: "100 900",
14 | });
15 | 
16 | export const metadata: Metadata = {
17 |   title: "Create Next App",
18 |   description: "Generated by create next app",
19 | };
20 | 
21 | export default function RootLayout({
22 |   children,
23 | }: Readonly<{
24 |   children: React.ReactNode;
25 | }>) {
26 |   return (
27 |     <html lang="en">
28 |       <body
29 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30 |       >
31 |         {children}
32 |       </body>
33 |     </html>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------