npm - create-next-structure - Versions diffs - 1.0.0 - Mend

create-next-structure 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/LICENSE +7 -0
package/README.md +51 -0
package/bin/index.js +90 -0
package/package.json +44 -0
package/templates/.env.template +36 -0
package/templates/app/(dashboard)/dashboard/page.jsx +40 -0
package/templates/app/(dashboard)/layout.jsx +24 -0
package/templates/app/(dashboard)/users/page.jsx +64 -0
package/templates/app/globals.css +14 -0
package/templates/app/layout.jsx +25 -0
package/templates/app/login/page.jsx +69 -0
package/templates/app/page.jsx +10 -0
package/templates/components/auth/withAuth.jsx +50 -0
package/templates/components/auth/withPublic.jsx +50 -0
package/templates/components/layout/Header.jsx +29 -0
package/templates/components/layout/Sidebar.jsx +35 -0
package/templates/components/ui/Button.jsx +36 -0
package/templates/components/ui/ErrorDisplay.jsx +19 -0
package/templates/components/ui/Input.jsx +30 -0
package/templates/components/ui/Loading.jsx +16 -0
package/templates/components/ui/Modal.jsx +33 -0
package/templates/components/ui/index.js +10 -0
package/templates/contexts/AuthContext.jsx +112 -0
package/templates/docs/README.md +128 -0
package/templates/hooks/useAsync.js +38 -0
package/templates/hooks/useAuth.js +93 -0
package/templates/hooks/useForm.js +67 -0
package/templates/jsconfig.json +27 -0
package/templates/lib/api/apiClient.js +105 -0
package/templates/lib/api/auth.api.js +36 -0
package/templates/lib/api/user.api.js +43 -0
package/templates/next.config.js +18 -0
package/templates/package.json +23 -0
package/templates/store/ReduxProvider.jsx +34 -0
package/templates/store/api/apiSlice.js +108 -0
package/templates/store/api/authApi.js +155 -0
package/templates/store/api/exampleApi.js +108 -0
package/templates/store/api/userApi.js +114 -0
package/templates/store/slices/authSlice.js +86 -0
package/templates/store/store.js +27 -0

package/templates/lib/api/auth.api.js ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * Auth API Service
+ * Responsibility: Authentication-related API calls
+ */
+import apiClient from "./apiClient";
+export const authApi = {
+  /**
+   * Login user
+   */
+  login: async (credentials) => {
+    return apiClient.post("/auth/login", credentials);
+  },
+  /**
+   * Register user
+   */
+  register: async (userData) => {
+    return apiClient.post("/auth/register", userData);
+  },
+  /**
+   * Get current user
+   */
+  getCurrentUser: async () => {
+    return apiClient.get("/auth/me");
+  },
+  /**
+   * Logout user
+   */
+  logout: async () => {
+    return apiClient.post("/auth/logout");
+  },
+};

package/templates/lib/api/user.api.js ADDED Viewed

@@ -0,0 +1,43 @@
+/**
+ * User API Service
+ * Responsibility: User-related API calls
+ */
+import apiClient from "./apiClient";
+export const userApi = {
+  /**
+   * Get all users with pagination
+   */
+  getUsers: async (params = {}) => {
+    return apiClient.get("/users", params);
+  },
+  /**
+   * Get user by ID
+   */
+  getUserById: async (id) => {
+    return apiClient.get(`/users/${id}`);
+  },
+  /**
+   * Create user
+   */
+  createUser: async (userData) => {
+    return apiClient.post("/users", userData);
+  },
+  /**
+   * Update user
+   */
+  updateUser: async (id, userData) => {
+    return apiClient.put(`/users/${id}`, userData);
+  },
+  /**
+   * Delete user
+   */
+  deleteUser: async (id) => {
+    return apiClient.delete(`/users/${id}`);
+  },
+};

package/templates/next.config.js ADDED Viewed

@@ -0,0 +1,18 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // API proxy configuration (optional - only if you want to proxy API calls)
+  async rewrites() {
+    const apiUrl =
+      process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api/v1";
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${apiUrl}/:path*`,
+      },
+    ];
+  },
+};
+module.exports = nextConfig;

package/templates/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "nextjs-template",
+  "version": "2.0.0",
+  "description": "Production-ready Next.js App Router frontend template with Redux & RTK Query",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@reduxjs/toolkit": "^2.0.1",
+    "react-redux": "^9.0.4"
+  },
+  "devDependencies": {
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^14.0.0"
+  }
+}

package/templates/store/ReduxProvider.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * Redux Store Provider
+ * Responsibility: Wrap the app with Redux store
+ *
+ * USAGE GUIDE:
+ * - Import this in your root layout (app/layout.jsx)
+ * - Wrap all components that need access to Redux store
+ *
+ * EXAMPLE:
+ * ```jsx
+ * import { ReduxProvider } from '@/store/ReduxProvider';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html lang="en">
+ *       <body>
+ *         <ReduxProvider>
+ *           {children}
+ *         </ReduxProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+"use client";
+import { Provider } from "react-redux";
+import { store } from "./store";
+export function ReduxProvider({ children }) {
+  return <Provider store={store}>{children}</Provider>;
+}

package/templates/store/api/apiSlice.js ADDED Viewed

@@ -0,0 +1,108 @@
+/**
+ * RTK Query API Slice with Auto Token Refresh
+ * Responsibility: Base API configuration with automatic token refresh on 401
+ *
+ * USAGE GUIDE:
+ * - This is the base API slice that handles all API calls
+ * - Automatically adds Authorization header with access token
+ * - Automatically refreshes token when it expires (401 error)
+ * - All other API services extend from this base
+ *
+ * HOW IT WORKS:
+ * 1. Request sent with access token
+ * 2. If 401 error received, automatically tries to refresh token
+ * 3. If refresh successful, retries original request
+ * 4. If refresh fails, logs out user
+ */
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { updateAccessToken, logout } from "../slices/authSlice";
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api/v1";
+// Base query with auth token
+const baseQuery = fetchBaseQuery({
+  baseUrl: API_BASE_URL,
+  prepareHeaders: (headers, { getState }) => {
+    const token = getState().auth.accessToken;
+    if (token) {
+      headers.set("authorization", `Bearer ${token}`);
+    }
+    return headers;
+  },
+});
+// Base query with re-authentication (token refresh)
+const baseQueryWithReauth = async (args, api, extraOptions) => {
+  let result = await baseQuery(args, api, extraOptions);
+  // If we get a 401 error, try to refresh the token
+  if (result?.error?.status === 401) {
+    console.log("Token expired, attempting to refresh...");
+    const refreshToken = api.getState().auth.refreshToken;
+    if (refreshToken) {
+      // Try to get a new access token
+      const refreshResult = await baseQuery(
+        {
+          url: "/auth/refresh",
+          method: "POST",
+          body: { refreshToken },
+        },
+        api,
+        extraOptions
+      );
+      if (refreshResult?.data) {
+        // Store the new access token
+        const { accessToken } = refreshResult.data;
+        api.dispatch(updateAccessToken(accessToken));
+        console.log(
+          "Token refreshed successfully, retrying original request..."
+        );
+        // Retry the original request with new token
+        result = await baseQuery(args, api, extraOptions);
+      } else {
+        // Refresh token failed - logout user
+        console.log("Token refresh failed, logging out...");
+        api.dispatch(logout());
+        // Redirect to login page
+        if (typeof window !== "undefined") {
+          window.location.href = "/login";
+        }
+      }
+    } else {
+      // No refresh token available - logout user
+      api.dispatch(logout());
+      // Redirect to login page
+      if (typeof window !== "undefined") {
+        window.location.href = "/login";
+      }
+    }
+  }
+  return result;
+};
+// Create the API slice
+export const apiSlice = createApi({
+  reducerPath: "api",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["User"
+ ✓ Starting...
+`destination` does not start with `/`, `http://`, or `https://` for route {"source":"/api/:path*","destination":"undefined/:path*"}
+Error: Invalid rewrite found
+coder-bird@root-bird:~/Desktop/next-template$ , "Auth"], // Add more tag types as needed
+  endpoints: (builder) => ({}), // Endpoints will be injected from other files
+});

package/templates/store/api/authApi.js ADDED Viewed

@@ -0,0 +1,155 @@
+/**
+ * Auth API Service using RTK Query
+ * Responsibility: Handle all authentication-related API calls
+ *
+ * USAGE GUIDE:
+ * - Import: import { useLoginMutation, useRegisterMutation, useLogoutMutation, useGetCurrentUserQuery } from '@/store/api/authApi'
+ * - In component: const [login, { isLoading, error }] = useLoginMutation()
+ * - Call mutation: await login({ email, password }).unwrap()
+ *
+ * EXAMPLE:
+ * ```jsx
+ * const [login, { isLoading }] = useLoginMutation();
+ *
+ * const handleLogin = async (credentials) => {
+ *   try {
+ *     const result = await login(credentials).unwrap();
+ *     // Success - user is automatically logged in
+ *     router.push('/dashboard');
+ *   } catch (error) {
+ *     // Handle error
+ *     console.error('Login failed:', error);
+ *   }
+ * };
+ * ```
+ */
+import { apiSlice } from "./apiSlice";
+import { setCredentials, logout as logoutAction } from "../slices/authSlice";
+export const authApi = apiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    // Login
+    login: builder.mutation({
+      query: (credentials) => ({
+        url: "/auth/login",
+        method: "POST",
+        body: credentials,
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          // Store user data and tokens in Redux store
+          dispatch(
+            setCredentials({
+              user: data.user,
+              accessToken: data.accessToken,
+              refreshToken: data.refreshToken,
+            })
+          );
+        } catch (error) {
+          console.error("Login error:", error);
+        }
+      },
+      invalidatesTags: ["Auth"],
+    }),
+    // Register
+    register: builder.mutation({
+      query: (userData) => ({
+        url: "/auth/register",
+        method: "POST",
+        body: userData,
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          // Store user data and tokens in Redux store
+          dispatch(
+            setCredentials({
+              user: data.user,
+              accessToken: data.accessToken,
+              refreshToken: data.refreshToken,
+            })
+          );
+        } catch (error) {
+          console.error("Register error:", error);
+        }
+      },
+      invalidatesTags: ["Auth"],
+    }),
+    // Logout
+    logout: builder.mutation({
+      query: () => ({
+        url: "/auth/logout",
+        method: "POST",
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled;
+        } catch (error) {
+          console.error("Logout error:", error);
+        } finally {
+          // Clear auth state regardless of API success
+          dispatch(logoutAction());
+        }
+      },
+      invalidatesTags: ["Auth", "User"],
+    }),
+    // Get current user
+    getCurrentUser: builder.query({
+      query: () => "/auth/me",
+      providesTags: ["User"],
+    }),
+    // Refresh token (usually called automatically by baseQueryWithReauth)
+    refreshToken: builder.mutation({
+      query: (refreshToken) => ({
+        url: "/auth/refresh",
+        method: "POST",
+        body: { refreshToken },
+      }),
+    }),
+    // Forgot password
+    forgotPassword: builder.mutation({
+      query: (email) => ({
+        url: "/auth/forgot-password",
+        method: "POST",
+        body: { email },
+      }),
+    }),
+    // Reset password
+    resetPassword: builder.mutation({
+      query: ({ token, password }) => ({
+        url: "/auth/reset-password",
+        method: "POST",
+        body: { token, password },
+      }),
+    }),
+    // Change password
+    changePassword: builder.mutation({
+      query: ({ oldPassword, newPassword }) => ({
+        url: "/auth/change-password",
+        method: "POST",
+        body: { oldPassword, newPassword },
+      }),
+    }),
+  }),
+});
+// Export hooks for usage in components
+export const {
+  useLoginMutation,
+  useRegisterMutation,
+  useLogoutMutation,
+  useGetCurrentUserQuery,
+  useRefreshTokenMutation,
+  useForgotPasswordMutation,
+  useResetPasswordMutation,
+  useChangePasswordMutation,
+} = authApi;

package/templates/store/api/exampleApi.js ADDED Viewed

@@ -0,0 +1,108 @@
+/**
+ * Example API Service Template
+ * Responsibility: Template for creating new API services
+ *
+ * USAGE GUIDE:
+ * Copy this file and rename it to match your resource (e.g., postsApi.js, productsApi.js)
+ * Replace 'Example' with your resource name
+ *
+ * STEPS TO CREATE NEW API SERVICE:
+ * 1. Copy this file
+ * 2. Rename file and variables
+ * 3. Define your tag types in store/api/apiSlice.js
+ * 4. Update endpoints with your API routes
+ * 5. Import and use hooks in your components
+ *
+ * EXAMPLE FOR POSTS API:
+ * ```jsx
+ * // store/api/postsApi.js
+ * import { apiSlice } from './apiSlice';
+ *
+ * export const postsApi = apiSlice.injectEndpoints({
+ *   endpoints: (builder) => ({
+ *     getPosts: builder.query({
+ *       query: () => '/posts',
+ *       providesTags: ['Posts'],
+ *     }),
+ *     createPost: builder.mutation({
+ *       query: (postData) => ({
+ *         url: '/posts',
+ *         method: 'POST',
+ *         body: postData,
+ *       }),
+ *       invalidatesTags: ['Posts'],
+ *     }),
+ *   }),
+ * });
+ *
+ * export const { useGetPostsQuery, useCreatePostMutation } = postsApi;
+ * ```
+ */
+import { apiSlice } from "./apiSlice";
+export const exampleApi = apiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    // GET - Fetch list of items
+    getExamples: builder.query({
+      query: (params = {}) => {
+        const queryString = new URLSearchParams(params).toString();
+        return `/examples${queryString ? `?${queryString}` : ""}`;
+      },
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.data.map(({ id }) => ({ type: "Example", id })),
+              { type: "Example", id: "LIST" },
+            ]
+          : [{ type: "Example", id: "LIST" }],
+    }),
+    // GET - Fetch single item by ID
+    getExampleById: builder.query({
+      query: (id) => `/examples/${id}`,
+      providesTags: (result, error, id) => [{ type: "Example", id }],
+    }),
+    // POST - Create new item
+    createExample: builder.mutation({
+      query: (data) => ({
+        url: "/examples",
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: [{ type: "Example", id: "LIST" }],
+    }),
+    // PUT - Update item
+    updateExample: builder.mutation({
+      query: ({ id, ...data }) => ({
+        url: `/examples/${id}`,
+        method: "PUT",
+        body: data,
+      }),
+      invalidatesTags: (result, error, { id }) => [
+        { type: "Example", id },
+        { type: "Example", id: "LIST" },
+      ],
+    }),
+    // DELETE - Delete item
+    deleteExample: builder.mutation({
+      query: (id) => ({
+        url: `/examples/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: [{ type: "Example", id: "LIST" }],
+    }),
+  }),
+});
+// Export hooks for usage in components
+export const {
+  useGetExamplesQuery,
+  useGetExampleByIdQuery,
+  useCreateExampleMutation,
+  useUpdateExampleMutation,
+  useDeleteExampleMutation,
+} = exampleApi;

package/templates/store/api/userApi.js ADDED Viewed

@@ -0,0 +1,114 @@
+/**
+ * User API Service using RTK Query
+ * Responsibility: Handle all user-related API calls
+ *
+ * USAGE GUIDE:
+ * - Import: import { useGetUsersQuery, useGetUserByIdQuery, useUpdateUserMutation } from '@/store/api/userApi'
+ * - In component: const { data: users, isLoading, error } = useGetUsersQuery()
+ * - With params: const { data: user } = useGetUserByIdQuery(userId)
+ *
+ * EXAMPLE:
+ * ```jsx
+ * const { data: users, isLoading, error, refetch } = useGetUsersQuery({ page: 1, limit: 10 });
+ *
+ * const [updateUser, { isLoading: isUpdating }] = useUpdateUserMutation();
+ *
+ * const handleUpdate = async (userId, userData) => {
+ *   try {
+ *     await updateUser({ id: userId, ...userData }).unwrap();
+ *     // Success
+ *   } catch (error) {
+ *     // Handle error
+ *   }
+ * };
+ * ```
+ */
+import { apiSlice } from "./apiSlice";
+export const userApi = apiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    // Get all users (with pagination and filters)
+    getUsers: builder.query({
+      query: (params = {}) => {
+        const queryString = new URLSearchParams(params).toString();
+        return `/users${queryString ? `?${queryString}` : ""}`;
+      },
+      providesTags: (result) =>
+        result
+          ? [
+              ...result.users.map(({ id }) => ({ type: "User", id })),
+              { type: "User", id: "LIST" },
+            ]
+          : [{ type: "User", id: "LIST" }],
+    }),
+    // Get single user by ID
+    getUserById: builder.query({
+      query: (id) => `/users/${id}`,
+      providesTags: (result, error, id) => [{ type: "User", id }],
+    }),
+    // Create new user
+    createUser: builder.mutation({
+      query: (userData) => ({
+        url: "/users",
+        method: "POST",
+        body: userData,
+      }),
+      invalidatesTags: [{ type: "User", id: "LIST" }],
+    }),
+    // Update user
+    updateUser: builder.mutation({
+      query: ({ id, ...userData }) => ({
+        url: `/users/${id}`,
+        method: "PUT",
+        body: userData,
+      }),
+      invalidatesTags: (result, error, { id }) => [{ type: "User", id }],
+    }),
+    // Delete user
+    deleteUser: builder.mutation({
+      query: (id) => ({
+        url: `/users/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: [{ type: "User", id: "LIST" }],
+    }),
+    // Update user profile
+    updateProfile: builder.mutation({
+      query: (userData) => ({
+        url: "/users/profile",
+        method: "PUT",
+        body: userData,
+      }),
+      invalidatesTags: ["User"],
+    }),
+    // Upload user avatar
+    uploadAvatar: builder.mutation({
+      query: (formData) => ({
+        url: "/users/avatar",
+        method: "POST",
+        body: formData,
+        // Don't set Content-Type header, let browser set it for FormData
+        headers: {},
+      }),
+      invalidatesTags: ["User"],
+    }),
+  }),
+});
+// Export hooks for usage in components
+export const {
+  useGetUsersQuery,
+  useGetUserByIdQuery,
+  useCreateUserMutation,
+  useUpdateUserMutation,
+  useDeleteUserMutation,
+  useUpdateProfileMutation,
+  useUploadAvatarMutation,
+} = userApi;