Merge pull request #11 from AlexStack/react19-nextjs15

React19 nextjs15

README.md

@@ -20,10 +20,13 @@ If you prefer Tailwind css, check this: [Tailwind-CSS-Version](https://github.co
 
 ## Clone this repository for React 19.x with NextJs 15.x or React 18.x with NextJs 14.x
 
-- Clone React19-Next15-MUI6-TS-Starter:
- - `git clone -b react19-nextjs15 https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter.git react19-nextjs15-mui6-ts-starter`
-- Clone React18-Next14-MUI5-TS-Starter:
- - `git clone -b nextjs14 https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter.git react18-nextjs14-mui5-ts-starter`
+- Clone & install React19-Next15-MUI6-TS-Starter:
+ - `git clone -b react19-nextjs15 https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter.git react19-nextjs15-mui6-ts-starter && cd react19-nextjs15-mui6-ts-starter && yarn install && yarn dev -p 3005`
+ - Open <http://localhost:3005>
+ - Note: React 19 is not released yet, there are some warnings in the console, please ignore them.
+- Clone & install React18-Next14-MUI5-TS-Starter:
+ - `git clone -b nextjs14 https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter.git react18-nextjs14-mui5-ts-starter && cd react18-nextjs14-mui5-ts-starter && yarn install && yarn dev -p 3005`
+ - Open <http://localhost:3005>
 
 ## Features
 

package.json

@@ -21,13 +21,13 @@
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@hookform/resolvers": "^3.3.1",
- "@mui/icons-material": "^5.14.9",
- "@mui/material": "^5.14.10",
+ "@mui/icons-material": "next",
+ "@mui/material": "next",
  "dayjs": "^1.11.10",
- "next": "^15.0.0-rc.0",
- "react": "^19.0.0-rc-512b09b2-20240718",
- "react-dom": "^19.0.0-rc-512b09b2-20240718",
- "react-hook-form": "^7.46.2",
+ "next": "rc",
+ "react": "rc",
+ "react-dom": "rc",
+ "react-hook-form": "^7.52.2",
  "react-icons": "^4.10.1",
  "zod": "^3.22.4"
  },
@@ -38,11 +38,12 @@
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@types/react": "^18.2.15",
+ "@types/jest": "^29.5.12",
  "@typescript-eslint/eslint-plugin": "^5.62.0",
  "@typescript-eslint/parser": "^5.62.0",
  "autoprefixer": "^10.4.14",
  "eslint": "^8.45.0",
- "eslint-config-next": "^15.0.0-rc.0",
+ "eslint-config-next": "rc",
  "eslint-config-prettier": "^8.8.0",
  "eslint-plugin-simple-import-sort": "^7.0.0",
  "eslint-plugin-unused-imports": "^2.0.0",

src/app/error.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'; // Error components must be Client Components
 
 import WarningIcon from '@mui/icons-material/Warning';
@@ -29,6 +30,12 @@ export default function Error({
  <Button onClick={reset}>Try again</Button>
  </Box>
  <a href='/?slug=homepage'>Back to home</a>
+ <div>
+ <img
+ src='https://img.freepik.com/free-vector/500-internal-server-error-concept-illustration_114360-1905.jpg'
+ alt='500'
+ />
+ </div>
  </Box>
  </section>
  </main>

src/app/not-found.tsx

@@ -1,5 +1,9 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+
 import { Box } from '@mui/material';
 import { Metadata } from 'next';
+import { usePathname } from 'next/navigation';
 import * as React from 'react';
 import { RiAlarmWarningFill } from 'react-icons/ri';
 
@@ -8,6 +12,7 @@ export const metadata: Metadata = {
 };
 
 export default function NotFound() {
+ const pathname = usePathname();
  return (
  <main>
  <Box sx={{ textAlign: 'center' }}>
@@ -17,8 +22,16 @@ export default function NotFound() {
  className='drop-shadow-glow animate-flicker text-red-500'
  />
  <h1>Page Not Found</h1>
+ {/* <div>{window.location.href} NOT exists</div> */}
+ <div>{pathname} NOT exists</div>
  <h5>change this in app/not-found.tsx</h5>
  <a href='/'>Back to home</a>
+ <div>
+ <img
+ src='https://img.freepik.com/free-vector/404-error-with-person-looking-concept-illustration_114360-7922.jpg'
+ alt='404'
+ />
+ </div>
  </div>
  </Box>
  </main>

src/app/page.tsx

@@ -6,7 +6,7 @@ import { NpmData, PageParams } from '@/types';
 
 const loadDataFromApi = async (slug?: string) => {
  if (slug === 'testError500') {
- throw new Error('This is mock a ssr 500 test error');
+ throw new Error('This is mock a SSR 500 test error');
  }
 
  // Fetch & cache data from 2 remote APIs test

src/components/Homepage.tsx

@@ -2,12 +2,12 @@ import AutoAwesome from '@mui/icons-material/AutoAwesome';
 import { Box, Typography } from '@mui/material';
 import Link from 'next/link';
 
-import { ClientProvider } from '@/hooks/useClientContext';
-
-import DisplayRandomPicture from '@/components/shared/DisplayRandomPicture';
-import PageFooter from '@/components/shared/PageFooter';
-import ReactActionForm from '@/components/shared/ReactActionForm';
-import ReactHookForm from '@/components/shared/ReactHookForm';
+import BottomLinks from '@/components/homepage/BottomLinks';
+import DisplayRandomPicture from '@/components/homepage/DisplayRandomPicture';
+import PageFooter from '@/components/homepage/PageFooter';
+import ReactActionForm from '@/components/homepage/ReactActionForm';
+import ReactHookForm from '@/components/homepage/ReactHookForm';
+import ClientSideWrapper from '@/components/shared/ClientSideWrapper';
 
 import { FETCH_API_CTX_VALUE, SITE_CONFIG } from '@/constants';
 
@@ -67,39 +67,12 @@ export default function Homepage({
  Test local NextJs API /api/test POST method (client-side
  component)
  </h4>
- <ClientProvider defaultValue={FETCH_API_CTX_VALUE}>
+ <ClientSideWrapper defaultContextValue={FETCH_API_CTX_VALUE}>
  <ReactActionForm />
  <ReactHookForm />
  <DisplayRandomPicture />
- </ClientProvider>
- </Box>
-
- <Box sx={{ m: 5 }}>
- <Link
- href='https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter'
- target='_blank'
- >
- See the Github repository page
- </Link>
- </Box>
- <Box sx={{ m: 5, a: { color: 'red' } }}>
- <Link
- href='https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2FAlexStack%2Fnextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter&showOptionalTeamCreation=false'
- target='_blank'
- >
- Click here to deploy a demo site to your Vercel in 1 minute
- </Link>
- </Box>
-
- <Box sx={{ m: 5 }}>
- <Link href='/test-page-not-exists'>
- Test 404 page not found (mock file not exists)
- </Link>
- </Box>
- <Box sx={{ m: 5 }}>
- <a href='/?slug=testError500'>
- Test 500 error page (mock server side throw error)
- </a>
+ <BottomLinks />
+ </ClientSideWrapper>
  </Box>
  </Box>
  </section>

src/components/homepage/BottomLinks.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Box } from '@mui/material';
+import Link from 'next/link';
+import * as React from 'react';
+
+import { useSharedUtilContext } from '@/hooks/useSharedUtilContext';
+
+const BottomLinks = () => {
+ const { openConfirmDialog } = useSharedUtilContext();
+
+ return (
+ <section>
+ <Box sx={{ m: 5 }}>
+ <Link
+ href='https://github.com/AlexStack/nextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter'
+ target='_blank'
+ >
+ See the Github repository page
+ </Link>
+ </Box>
+ <Box sx={{ m: 5, a: { color: 'red' } }}>
+ <Link
+ href='https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2FAlexStack%2Fnextjs-materia-mui-typescript-hook-form-scaffold-boilerplate-starter&showOptionalTeamCreation=false'
+ target='_blank'
+ onClick={(e) => {
+ e.preventDefault();
+ openConfirmDialog({
+ title: 'Copy this repository to your Vercel',
+ content:
+ 'Please make sure you have a Vercel account and login first',
+ onConfirm: () => {
+ window.open((e.target as HTMLAnchorElement).href, '_blank');
+ },
+ hideCancelButton: true,
+ });
+ }}
+ >
+ Click here to deploy a demo site to your Vercel in 1 minute
+ </Link>
+ </Box>
+
+ <Box sx={{ m: 5 }}>
+ <Link
+ href='/test-page-not-exists'
+ onClick={(e) => {
+ e.preventDefault();
+ openConfirmDialog({
+ title: 'Mock a page not found',
+ content:
+ 'This is an URL not exists, click OK you will see a custom 404 error page. You can also test the 404 page by typing a random URL in the browser address bar.',
+ onConfirm: () => {
+ window.open((e.target as HTMLAnchorElement).href, '_blank');
+ },
+ hideCancelButton: true,
+ });
+ }}
+ >
+ Test 404 page not found (mock file not exists)
+ </Link>
+ </Box>
+ <Box sx={{ m: 5 }}>
+ <a
+ href='/?slug=testError500'
+ onClick={(e) => {
+ e.preventDefault();
+ openConfirmDialog({
+ title: 'Mock a server side error',
+ content:
+ 'This is mock throw a server side error, click OK you will see a custom 500 error page. ',
+ onConfirm: () => {
+ window.open((e.target as HTMLAnchorElement).href, '_blank');
+ },
+ });
+ }}
+ >
+ Test 500 error page (mock server side throw error)
+ </a>
+ </Box>
+ </section>
+ );
+};
+
+export default BottomLinks;

src/components/shared/DisplayRandomPicture.tsx → src/components/homepage/DisplayRandomPicture.tsx

@@ -10,19 +10,20 @@ import { purple } from '@mui/material/colors';
 import Stack from '@mui/material/Stack';
 import React, { useEffect, useState, useTransition } from 'react';
 
-import { useAlertBar } from '@/hooks/useAlertBar';
 import { useClientContext } from '@/hooks/useClientContext';
+import { useSharedUtilContext } from '@/hooks/useSharedUtilContext';
 
 import SubmitButton from '@/components/shared/SubmitButton';
 
 import { FetchApiContext } from '@/constants';
+import { consoleLog } from '@/utils/shared/console-log';
 import { getApiResponse } from '@/utils/shared/get-api-response';
 
 const DisplayRandomPicture = () => {
  const [imageUrl, setImageUrl] = useState('');
  const [error, setError] = useState('');
  const { fetchCount, updateClientCtx } = useClientContext<FetchApiContext>();
- const { setAlertBarProps, renderAlertBar } = useAlertBar();
+ const { setAlertBarProps } = useSharedUtilContext();
  const renderCountRef = React.useRef(0);
  const [isPending, startTransition] = useTransition();
 
@@ -52,6 +53,9 @@ const DisplayRandomPicture = () => {
  setAlertBarProps({
  message: 'A random picture fetched successfully',
  severity: 'info',
+ onClose: () => {
+ consoleLog('Alert bar closed');
+ },
  });
  } catch (error) {
  const errorMsg =
@@ -121,7 +125,6 @@ const DisplayRandomPicture = () => {
  </Avatar>
  </StyledRefreshButton>
  )}
- {renderAlertBar()}
  </Stack>
  );
 };

src/components/shared/ReactActionForm.tsx → src/components/homepage/ReactActionForm.tsx

@@ -14,8 +14,8 @@ import { purple } from '@mui/material/colors';
 import React, { useActionState, useOptimistic } from 'react';
 import { z, ZodError } from 'zod';
 
-import { useAlertBar } from '@/hooks/useAlertBar';
 import { useClientContext } from '@/hooks/useClientContext';
+import { useSharedUtilContext } from '@/hooks/useSharedUtilContext';
 
 import SubmitButton from '@/components/shared/SubmitButton';
 
@@ -51,7 +51,7 @@ const ReactActionForm: React.FC = () => {
  FormValues | undefined
  >(undefined);
 
- const { setAlertBarProps, renderAlertBar } = useAlertBar();
+ const { setAlertBarProps } = useSharedUtilContext();
 
  const { fetchCount, updateClientCtx } = useClientContext<FetchApiContext>();
  const [formErrors, setFormErrors] = React.useState<Record<string, string>>(
@@ -184,7 +184,7 @@ const ReactActionForm: React.FC = () => {
  justifyContent='center'
  alignItems='center'
  >
- <div>Total fetch count from React Context:</div>
+ <div>Total fetch count from ReactActionForm.tsx:</div>
  <Avatar
  sx={{
  bgcolor: purple[500],
@@ -198,8 +198,6 @@ const ReactActionForm: React.FC = () => {
  </Avatar>
  </Stack>
  </Box>
-
- {renderAlertBar()}
  </StyledForm>
  );
 };

src/components/shared/ReactHookForm.tsx → src/components/homepage/ReactHookForm.tsx

@@ -16,9 +16,8 @@ import React, { useEffect } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { useAlertBar } from '@/hooks/useAlertBar';
 import { useClientContext } from '@/hooks/useClientContext';
-import useConfirmationDialog from '@/hooks/useConfirmDialog';
+import { useSharedUtilContext } from '@/hooks/useSharedUtilContext';
 
 import SubmitButton from '@/components/shared/SubmitButton';
 
@@ -52,10 +51,7 @@ const ReactHookForm: React.FC = () => {
  const [apiResult, setApiResult] = React.useState<FormValues>();
  const [isSubmitting, setIsSubmitting] = React.useState(false);
 
- const { setAlertBarProps, renderAlertBar } = useAlertBar();
-
- const { openConfirmDialog, renderConfirmationDialog } =
- useConfirmationDialog();
+ const { setAlertBarProps, openConfirmDialog } = useSharedUtilContext();
 
  const {
  handleSubmit,
@@ -195,10 +191,6 @@ const ReactHookForm: React.FC = () => {
  Test MUI confirmation dialog
  </Button>
  </Box>
-
- {renderAlertBar()}
-
- {renderConfirmationDialog()}
  </StyledForm>
  );
 };