This is a starter template for projects using Next.js 14 with TypeScript and Tailwind CSS. It includes a basic folder structure to help you get started quickly.
- NStart Project
- Tailwind CSS
- tailwind-merge - Utility to combine Tailwind CSS classes
- @reduxjs/toolkit
- react-redux
- reselect - Selector library for Redux
- @nextui-org/react - React UI library
- framer-motion - Animation library for React
- react-hot-toast - Notification library for React
- react-icons - Icon library for React
- @react-aria/i18n - Internationalization utilities
- next-auth - Authentication library for Next.js
- next-nprogress-bar - Progress bar for Next.js
- next-themes - Theme management for Next.js
- eslint - Linter for JavaScript and TypeScript
- eslint-config-next - ESLint configuration for Next.js
- postcss - Tool for transforming CSS
- typescript - TypeScript language
- @types/node - Type definitions for Node.js
- @types/react - Type definitions for React
- @types/react-dom - Type definitions for React DOM
- Node.js
- Yarn, pnpm or npm (personal preference)
-
Clone the repository
- Usando https
git clone https://github.com/samuelrms/nstart-project.git
- Usando SSH
git clone git@github.com:samuelrms/nstart-project.git
- Usando GitHub CLI
gh repo clone samuelrms/nstart-project
-
Navigate to the project directory:
cd nstart-project -
Install the dependencies:
- If you are using npm as your package manager, you can install it by running the following command in your terminal:
npm i
- If you are using yarn as your package manager, you can install it by running the following command in your terminal:
yarn
- If you are using pnpm as your package manager, you can install it by running the following command in your terminal:
pnpm i
This template is designed to be used with the following commands:
npx degit samuelrms/nstart-project <YOUR_APP_NAME>This command uses degit to directly clone the nstart-project from the GitHub repository of samuelrms into a new directory named <YOUR_APP_NAME>. degit is a scaffolding tool that lets you create a new project straight from a git repository.
or
npx create-next-app --example https://github.com/samuelrms/nstart-project <YOUR_APP_NAME>This command uses create-next-app to bootstrap a new Next.js application using the nstart-project from the GitHub repository of samuelrms as a template. The new application will be created in a new directory named <YOUR_APP_NAME>. create-next-app is an official tool from the Next.js team for quickly starting new projects.
Both commands are run using npx, which is a package runner tool that comes with npm. It allows you to run packages without having to install them globally first. <YOUR_APP_NAME> should be replaced with the name you want for your new project.
Remember to navigate into your new project directory with cd <YOUR*APP*NAME> before starting the development server with***npm run dev***, yarn dev or _pnpm dev_. Enjoy coding! 😊
In the project directory, you can run:
- npm
npm run dev- yarn
yarn dev- pnpm
pnpm devRuns the app in development mode. Open http://localhost:3000 to view it in your browser.
- npm
npm run build- yarn
yarn build- pnpm
pnpm buildBuilds the app for production.
- npm
npm run start- yarn
yarn start- pnpm
pnpm startStarts the production server.
The tailwind.config.js file contains Tailwind CSS configurations. To customize the styles, edit this file as needed.
RTK Query is a powerful tool for managing asynchronous data in Redux applications. It simplifies data fetching and caching logic, making development more efficient.
Here's how to define an API service using RTK Query:
apiServiceRedux file of the redux api
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { FETCH_OPTIONS } from "@/enum";
import { QueryArgs } from "@/types";
import { createSelector } from "@reduxjs/toolkit";
import { RootState } from "../store";
// Defining the API service
export const apiServiceRedux = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({ baseUrl: "/api/" }),
endpoints: (builder) => ({
dynamicQuery: builder.query<unknown, QueryArgs>({
query: ({ path, method = FETCH_OPTIONS.GET, params, body }) => ({
url: path,
method,
params,
body: body ? JSON.stringify(body) : undefined,
headers: {
"Content-Type": "application/json",
},
}),
}),
}),
});
// Hooks to use API endpoints
export const { useDynamicQueryQuery: useDynamicQuery } = apiServiceRedux;
// Selectors for query results
export const selectDynamicQueryResult = (args: {
path: string;
method?: FETCH_OPTIONS;
}) =>
createSelector(
(state: RootState) =>
apiServiceRedux.endpoints.dynamicQuery.select({
path: args.path,
method: args.method,
})(state),
(queryResult) => queryResult
);Here's an example of how to use RTK Query in your project:
import {
RootState,
selectDynamicQueryResult,
useAppSelector,
useDynamicQuery,
} from "@/lib";
const MyComponent: React.FC = () => {
// Perform the query
const { data, error, isLoading } = useDynamicQuery({
path: "public",
});
// Select the query result from the state
const selectQueryState = selectDynamicQueryResult({
path: "public",
});
const queryState = useAppSelector((state: RootState) =>
selectQueryState(state)
);
return (
<div>
{isLoading && <p>Loading...</p>}
{error && <p>Error: {error.message}</p>}
{data && <p>Data: {JSON.stringify(data)}</p>}
<p>Query State: {JSON.stringify(queryState)}</p>
</div>
);
};
export default MyComponent;The Stack component is a flexible utility component built with React. It allows you to create an HTML element of your choice and pass any number of HTML attributes to it.
The Stack component accepts the following props:
- elementType: This is an optional type that can be any valid key of "ReactHTML". If not provided, the default value will be "div".
- children: This is the content that will be rendered within the created element.
- className: This is an optional string that can be used to add CSS classes to the element.
- ...props: Any other valid HTML attribute can be passed to the component.
Here's an example of how to use the Stack component:
<Stack elementType="section" className="my-class">
<p>This is an example of using the Stack component.</p>
</Stack>The Active Link component is a custom Link component built with Next.js. It is designed to provide an active state for navigation links, making it easier for users to understand their current location within the application.
The Active Link component accepts the following props:
- href: This is a required string that represents the path of the link.
- includes: This is an optional boolean that, when true, checks if the current path includes the href value.
- children: This is the content that will be rendered within the link.
- ...props: Any other valid Link attribute can be passed to the component.
Here's an example of how to use the Active Link component:
"use client"
<ActiveLink href="/home" includes={true}>
Home
</ActiveLink>The Text component is a flexible text rendering component built with React. It allows you to create a text element of your choice and pass any number of HTML attributes to it.
The Text component accepts the following props:
- elementType: This is an optional type that can be "p", "h1", "h2", "h3", "h4", "h5", "h6", or "span". If not provided, the default value will be "p".
- children: This is the content that will be rendered within the created element.
- className: This is an optional string that can be used to add CSS classes to the element.
- ...props: Any other valid HTML attribute can be passed to the component.
Here's an example of how to use the Text component:
<Text elementType="h1" className="my-class">
This is an example of using the Text component.
</Text>The Breadcrumb component is a custom navigation component built with Next.js and NextUI. It provides a navigational hierarchy of a website's pages to the user.
The Breadcrumb component accepts the following props:
- actions: This is an optional prop that can be used to pass additional actions to the component.
- title: This is an optional string that represents the title of the page. If not provided, the page name will be used.
- customName: This is an optional string that can be used to provide a custom name for the last item in the breadcrumb list.
- overrideNames: Overwrites the names of the routes in the breadcrumb, starting from the number zero, if not overwritten the default name will be kept.
- ...props: Any other valid attribute can be passed to the component.
Here's an example of how to use the Breadcrumb component:
"use client"
<Breadcrumb
title="Home"
customName="Custom Name"
action={
// Your Actions
}
overrideNames={{ 0: "rootRoute" }}
/>The OTP component is a custom input component built with Next.js and Tailwind CSS. It allows the entry of a One-Time Password (OTP) through multiple input fields.
The OTP component accepts the following props:
- length: Number of characters accepted by the OTP. The default is 6.
- onComplete: Callback function called when the OTP is filled.
- inputHeight: Defines the height of the input. Refer to Height for possible values and their corresponding sizes. The default is "h-12".
- inputWidth: Defines the width of the input. Refer to Width for possible values and their corresponding sizes. The default is "w-12".
- spacing: Defines the spacing between the inputs. Refer to Spacing for possible values and their corresponding sizes. The default is "gap-4".
- bg: Background color of the input in Tailwind format. The default is "bg-white".
- fontColor: Font color of the input in Tailwind format. The default is "text-black".
- ...inputProps: Any other valid attributes can be passed to the input element.
Here's an example of how to use the OTP component:
"use client"
<OTP
length={6}
onComplete={(otp) => console.log(otp)}
inputHeight="h-12"
inputWidth="w-12"
spacing="gap-4"
bg="bg-white"
fontColor="text-black"
/>The Theme component is a custom theme switcher built with Next.js and NextUI. It allows users to toggle between light and dark themes.
The Theme component accepts the following props:
- hiddenTooltip: Boolean to hide or show the tooltip. The default is false.
- lightThemeTextTooltip: String for the tooltip text when the light theme is active. The default is "Tema Claro".
- darkThemeTextTooltip: String for the tooltip text when the dark theme is active. The default is "Tema Escuro".
- ...props: Any other valid attributes can be passed to the Switch component from NextUI.
Here's an example of how to use the Theme component:
"use client"
<Theme
hiddenTooltip={false}
lightThemeTextTooltip="Light Theme"
darkThemeTextTooltip="Dark Theme"
/>The CustomInput component is a custom input field built with Next.js and NextUI. It provides a styled input with a bordered variant and primary color.
The CustomInput component accepts the following props:
- variant: The variant of the select dropdown. The default is "bordered".
- color: The color of the select dropdown. The default is "primary".
- ...props: Any other valid attributes can be passed to the Input component from NextUI.
Here's an example of how to use the CustomInput component:
"use client"
<CustomInput
placeholder="Enter text"
type="text"
/>The CustomSelect component is a custom select dropdown built with Next.js and NextUI. It provides a styled select dropdown with a bordered variant and primary color.
The CustomSelect component accepts the following props:
- variant: The variant of the select dropdown. The default is "bordered".
- color: The color of the select dropdown. The default is "primary".
- ...props: Any other valid attributes can be passed to the Select component from NextUI.
Here's an example of how to use the CustomSelect component:
"use client"
<CustomSelect
placeholder="Select an option"
options={[
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
]}
/>Feel free to contribute to this project. To get started, you can open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
.
╠══ tsconfig.json
╠══ .gitignore
╠══ public/
║ ╠══ vercel.svg
║ ╚══ next.svg
╠══ .env
╠══ package.json
╠══ LICENSE
╠══ README.md
╠══ src/
║ ╠══ screens/
║ ║ ╠══ index.ts
║ ║ ╚══ Home
║ ║ ║ ╚══ index.tsx
║ ╠══ service/
║ ║ ╠══ customFetch/
║ ║ ║ ╠══ API.ts
║ ║ ║ ╠══ fetch.types.ts
║ ║ ║ ╠══ SERVER.ts
║ ║ ║ ╚══ index.ts
║ ║ ╚══ index.ts
║ ╠══ enum/
║ ║ ╠══ method.fetch.ts
║ ║ ╚══ index.ts
║ ╠══ schema/
║ ║ ╚══ index.ts
║ ╠══ mocks/
║ ║ ╚══ index.ts
║ ╠══ app/
║ ║ ╠══ api/
║ ║ ║ ╠══ secure/
║ ║ ║ ║ ╚══ route.ts
║ ║ ║ ╠══ auth/
║ ║ ║ ║ ╚══ [...nextauth]
║ ║ ║ ║ ║ ╚══ route.ts
║ ║ ║ ╚══ public
║ ║ ║ ║ ╚══ route.ts
║ ║ ╠══ favicon.ico
║ ║ ╠══ page.tsx
║ ║ ╚══ layout.tsx
║ ╠══ types/
║ ║ ╠══ index.ts
║ ║ ╚══ QueryArgs.ts
║ ╠══ hooks/
║ ║ ╠══ useNavigationList/
║ ║ ║ ╠══ useNavigationList.types.ts
║ ║ ║ ╚══ index.tsx
║ ║ ╚══ index.ts
║ ╠══ components/
║ ║ ╠══ Stack/
║ ║ ║ ╚══ index.tsx
║ ║ ╠══ ActiveLink/
║ ║ ║ ╚══ index.tsx
║ ║ ╠══ index.ts
║ ║ ╠══ Text/
║ ║ ║ ╚══ index.ts
║ ║ ╠══ OTP/
║ ║ ║ ╠══ OTP.types.ts
║ ║ ║ ╠══ enum/
║ ║ ║ ║ ╠══ index.ts
║ ║ ║ ║ ╠══ height.ts
║ ║ ║ ║ ╠══ width.ts
║ ║ ║ ║ ╚══ spacing.ts
║ ║ ║ ╚══ index.tsx
║ ║ ╠══ Breadcrumb/
║ ║ ║ ╠══ Breadcrumb.types.ts
║ ║ ║ ╚══ index.tsx
║ ║ ╠══ CustomInput/
║ ║ ║ ╚══ index.tsx
║ ║ ╠══ CustomSelect/
║ ║ ║ ╚══ index.tsx
║ ║ ╚══ Theme
║ ║ ║ ╠══ Theme.types.ts
║ ║ ║ ╚══ index.tsx
║ ╠══ errors/
║ ║ ╚══ index.ts
║ ╠══ providers/
║ ║ ╠══ theme.provider.tsx
║ ║ ╠══ nextUI.provider.tsx
║ ║ ╠══ redux.provider.tsx
║ ║ ╠══ nextAuth.privider.tsx
║ ║ ╚══ index.tsx
║ ╠══ utils/
║ ║ ╠══ index.ts
║ ║ ╚══ capitalizeWords.ts
║ ╠══ lib/
║ ║ ╠══ redux/
║ ║ ║ ╠══ api/
║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╠══ reducer/
║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╠══ index.ts
║ ║ ║ ╠══ slice/
║ ║ ║ ║ ╠══ index.ts
║ ║ ║ ║ ╚══ user
║ ║ ║ ║ ║ ╠══ user.types.ts
║ ║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╠══ store/
║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╠══ middleware/
║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╠══ hooks/
║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╚══ config
║ ║ ║ ║ ╚══ index.ts
║ ║ ╠══ index.ts
║ ║ ╚══ nextAuth
║ ║ ║ ╠══ index.ts
║ ║ ║ ╠══ auth/
║ ║ ║ ║ ╚══ index.ts
║ ║ ║ ╚══ options
║ ║ ║ ║ ╚══ index.ts
║ ╠══ constants/
║ ║ ╚══ index.ts
║ ╠══ styles/
║ ║ ╚══ tw.css
║ ╚══ functions
║ ║ ╠══ createQueryStrings.ts
║ ║ ╚══ index.ts
╠══ pnpm-lock.yaml
╠══ postcss.config.mjs
╠══ .eslintrc.json
╠══ .npmrc
╠══ next.config.mjs
╚══ tailwind.config.ts