Next.js and WordPress

Table of Contents

Keyboard Shortcuts

To open the Chrome Developer Tools, Console Tab, you can use the following shortcodes:

  • Windows: ctrl + shift + j
  • Mac: cmd + option + i

To open the Chrome Developer Tools, Elements Tab, you can use the following shortcodes:

  • Windows: ctrl + shift + c
  • Mac: cmd + option + c

To toggle device toolbar use the following shortcodes:

  • Windows: ctrl + shift + m
  • Mac: cmd + shift + m
				
					bunx create-next-app@latest .

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
? Would you like to customize the import alias (`@/*` by default)? › No
				
			
				
					bunx --bun shadcn@latest init
bunx --bun shadcn@latest add
a Enter
				
			
				
					bun add woocommerce-rest-ts-api
				
			
				
					Runtime Error

Error: Invalid src prop (https://web-prodigies-yeezy.local/wp-content/uploads/2025/05/Eco-Friendly-Bamboo-Toothbrush.png) on `next/image`, hostname "web-prodigies-yeezy.local" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
Call Stack
2
map
[native code] (0:0)
map
[native code] (0:0)
				
			

To fix the previous runtime error, update the next.js config file:

next.config.ts

				
					import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  experimental: {
    webpackBuildWorker: true,
    parallelServerBuildTraces: true,
    parallelServerCompiles: true,
  },
};

export default nextConfig;

				
			

Leave a Reply