### File Path Example (TypeScript vs JavaScript) Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/index Illustrates the difference in file paths between TypeScript and JavaScript versions of the template, emphasizing the need for adjustments in JavaScript projects. ```TypeScript src/components/Providers.tsx ``` ```JavaScript src/components/Providers.jsx ``` -------------------------------- ### Launch Vuexy Next.js Project in Development Mode Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/overview/installation Commands to start the project in development mode using pnpm, yarn, or npm. Upon successful execution, the project will be active, typically accessible at `http://localhost:3000`. ```shell pnpm dev ``` ```shell yarn dev ``` ```shell npm run dev ``` -------------------------------- ### Install Project Dependencies (pnpm, yarn, npm) Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/overview/installation Commands to install project dependencies using pnpm, yarn, or npm. pnpm is highly recommended. These commands fetch and set up all necessary packages for the Vuexy Next.js template. ```shell pnpm install ``` ```shell yarn install ``` ```shell npm install ``` -------------------------------- ### Customize Development Server Port Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/overview/installation Modify the default port for the development server by adding `--port` or `-p` to the launch command. This example shows changing the port to 3001. Remember to update the `.env` file if the URL changes. ```shell pnpm dev --port 3001 ``` -------------------------------- ### Example: Customizing the Vuexy Customizer Component Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/customizing-our-component A step-by-step example demonstrating how to customize the Customizer component. This involves copying its folder from `src/@core/components/customizer` to `src/components/customizer`, making changes, and updating the import path from `'@core/components/customizer'` to `'@components/customizer'`. ```Text 1. Copy the `src/@core/components/customizer` folder and paste it into the `src/components` folder 2. Make the necessary changes in the `src/components/customizer` folder according to your project requirements 3. Search for the `'@core/components/customizer'` import path in your project and update it to `'@components/customizer'` ``` -------------------------------- ### Common Package Installation Commands Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/faqs/installation-errors These are the primary commands used to install project dependencies, which are often the source of installation errors. ```shell pnpm install ``` ```shell yarn install ``` ```shell npm install ``` -------------------------------- ### Adjusting File Paths for TypeScript and JavaScript Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/overview/getting-started This snippet illustrates the difference in file paths for components when using TypeScript (.tsx) versus JavaScript (.jsx) in the project, specifically for the Providers component. Users should adjust paths based on their chosen language flavor. ```TypeScript src/components/Providers.tsx ``` ```JavaScript src/components/Providers.jsx ``` -------------------------------- ### Run Prisma Database Migrations Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/add-auth Commands to execute Prisma database migrations, creating or updating the database schema based on the schema.prisma file. ```pnpm pnpm migrate ``` ```yarn yarn migrate ``` ```npm npm run migrate ``` -------------------------------- ### Creating a New Next.js Project for Testing Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/faqs/installation-errors This command initializes a fresh Next.js application, useful for determining if installation issues are specific to the current template or a broader environment problem. ```shell npx create-next-app@latest ``` -------------------------------- ### Define Next.js API Route for GET Request Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/development/apps-and-pages-setup/pages This TypeScript code snippet shows how to define a simple GET API route in Next.js using the App Router conventions. It imports `NextResponse` to return JSON data from a fake database, demonstrating a basic API endpoint setup. ```TypeScript import { NextResponse } from 'next/server'; import { db } from '@/app/api/fake-db/pages/faq'; export async function GET() { return NextResponse.json(db); } ``` -------------------------------- ### Install NextAuth.js Dependency Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/add-auth Add the NextAuth.js package to your project using your preferred package manager (pnpm, yarn, or npm). This is a crucial first step for setting up authentication. ```pnpm pnpm install next-auth ``` ```yarn yarn add next-auth ``` ```npm npm install next-auth ``` -------------------------------- ### Next.js API Route for Invoice Data Retrieval Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/development/apps-and-pages-setup/apps This code defines a Next.js API route for the Invoice app, located at `src/app/api/apps/invoice/route.ts`. It implements a `GET` request handler that returns the entire invoice database as a JSON response using `NextResponse.json`. ```TypeScript import { NextResponse } from 'next/server'; import { db } from '@/app/api/fake-db/apps/invoice'; export async function GET() { return NextResponse.json(db); } ``` -------------------------------- ### Initialize NextAuth.js with Next.js Route Handlers Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/credentials-provider This snippet demonstrates how to initialize NextAuth.js within a Next.js App Router using Route Handlers. It shows the setup in `src/app/api/auth/[...nextauth]/route.ts`, exporting GET and POST handlers required for NextAuth.js to function properly. ```TypeScript // Third-party Imports import NextAuth from 'next-auth' // Lib Imports import { authOptions } from '@/libs/auth' const handler = NextAuth(authOptions) export { handler as GET, handler as POST } ``` -------------------------------- ### Install Authentication Dependencies for Google Provider Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/add-auth Commands to install necessary packages like @auth/prisma-adapter, @prisma/client, prisma, and dotenv-cli required for integrating Google authentication with Prisma in a Next.js project. ```pnpm pnpm install @auth/prisma-adapter @prisma/client prisma dotenv-cli ``` ```yarn yarn add @auth/prisma-adapter @prisma/client prisma dotenv-cli ``` ```npm npm install @auth/prisma-adapter @prisma/client prisma dotenv-cli ``` -------------------------------- ### Example Usage of Custom MUI TextField in React Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/components/mui/text-field This example illustrates how to integrate and use the `CustomTextField` component within a React functional component. It shows how to pass common props such as `label`, `fullWidth`, and `placeholder` to configure the text field for a typical input scenario. ```JavaScript import CustomTextField from '@core/components/mui/TextField' const Example = () => { return ( ) } ``` -------------------------------- ### Install i18n Dependencies Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/development/translation/add-i18n-to-Starter-kit Installs necessary packages for internationalization, including locale matching and negotiation, using pnpm, yarn, or npm. ```shell pnpm install @formatjs/intl-localematcher @types/negotiator negotiator ``` ```shell yarn add @formatjs/intl-localematcher @types/negotiator negotiator ``` ```shell npm install @formatjs/intl-localematcher @types/negotiator negotiator ``` -------------------------------- ### Set Database URL in .env for SQLite Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/google-prisma Example of defining the DATABASE_URL in the .env file, specifically for a SQLite database, pointing to the database file. ```shell DATABASE_URL=file:./dev.db ``` -------------------------------- ### Example i18n Dictionary File Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/development/translation/add-i18n-to-Starter-kit Illustrates the structure of a language dictionary file (e.g., `en.json`) for internationalization, defining navigation keys and their corresponding translations. ```json { "navigation": { "home": "Home", "about": "About" } } ``` -------------------------------- ### Define Prisma Schema Path in package.json Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/google-prisma Example of how the Prisma schema path is defined within the package.json file, pointing to the location of your Prisma schema. ```json "prisma": { "schema": "./src/prisma/schema.prisma" } ``` -------------------------------- ### Generate Prisma Client Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/add-auth Command to generate the Prisma client, which is an auto-generated query builder for your database, enabling type-safe database access. ```Shell npx prisma generate ``` -------------------------------- ### Launch Prisma Studio Source: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/getting-started/guide/authentication/google-prisma Command to open Prisma Studio, a visual editor for your database, allowing you to preview and interact with your data. ```shell npx prisma studio ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.