Next initial folders and files ( Next.js 15.0.4 )

Create Next.js app

npx create-next-app@latest

Install Package locally

npm install path/to/package-folder
npx nextinit

Install Package Global

npm install -g next-initial

- Usage

Run command

nextinit

type your folder name; like widget >> Enter.

FINISH

1. Define custom Color ( can change one point to effect all )

onPrimary
onSecondary

• In File tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        onPrimary: "#334155",
        onSecondary: "#64758B",
        onTertiary: "#64758B",
        onError: "#FF5349",
        blue: "#1fb6ff",
        pink: "#ff49db",
        orange: "#ff7849",
        green: "#13ce66",
        "gray-dark": "#273444",
        gray: "#8492a6",
        "gray-light": "#d3dce6",
      },
    },
  },
  plugins: [],
} satisfies Config;

2. Define protocol and hostname in images / remotePatterns...

• In File next.config.mjs

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.pexels.com",
      },
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

export default nextConfig;

Structure tree

src/
├── app/
│
├── components/ `mkdir components`
    │
    ├── widget/     // folder name that you create first.
        ├── button/
        │   ├── button_default.tsx
        │   └── button_learn_more.tsx
        ├── image/
        │   ├── image_content_fill_vertical.tsx
        │   ├── image_content_fill.tsx
        │   ├── image_icon_small.tsx
        │   ├── image_profile_extra_small.tsx
        │   ├── image_profile_medium.tsx
        │   └── image_profile_small.tsx
        ├── layout/
        │   ├── layout_card.tsx
        │   ├── layout_image_profile_title_medium.tsx
        │   ├── layout_image_profile_title.tsx
        │   ├── layout_special_image_title_description.tsx
        │   └── Layout_two_column_between.tsx
        ├── text/
        │   ├── text_base_bold.tsx
        │   ├── text_base_medium.tsx
        │   ├── text_base.tsx
        │   ├── text_extra_large_bold.tsx
        │   ├── text_extra_large_medium.tsx
        │   ├── text_extra_large.tsx
        │   ├── text_extra_small_bold.tsx
        │   ├── text_extra_small_medium.tsx
        │   ├── text_extra_small.tsx
        │   ├── text_large_bold.tsx
        │   ├── text_large_medium.tsx
        │   ├── text_large.tsx
        │   ├── text_small_bold.tsx
        │   ├── text_small_medium.tsx
        │   ├── text_small.tsx
        │   ├── text_two_extra_large_bold.tsx
        │   ├── text_two_extra_large_medium.tsx
        │   └── text_two_extra_large.tsx
        ├── widget/
        │   ├── profile/
        │   │   └── profile_card_widget.tsx
        │   └── list_image_caption_title_description_widget.tsx

Usage widget

<ProfileCardWidget />

profile_card.tsx

import ProfileCardWidget from "@/components/widget/widget/profile_card_widget";

export default function Home() {
  return (
    <div className="">
      <ProfileCardWidget
        coverImage="https://images.pexels.com/photos/26840789/pexels-photo-26840789.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load"
        coverAlt="profile"
        profileImage="https://images.pexels.com/photos/23325663/pexels-photo-23325663.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load"
        profileAlt="profile"
        name="Nell Abbott"
        followerCount="213"
        buttonTitle="My Profile"
      />
    </div>
  );
}

<ListImageCaptionTitleDescriptionWidget />

<ListImageCaptionTitleDescriptionWidget
  imageUrl="https://images.pexels.com/photos/19171623/pexels-photo-19171623.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load"
  imageAlt="Somethings"
  caption="Isabel Obrien"
  title="9364ae85-2697-5e30-870a-1b483a7a25ce"
  description="movement attack concerned shaking charge grown exactly did event burst earth porch dirt dull cookies national gate air blue stuck son that biggest chose"
/>