diff --git a/docs/NextJs/_category_.json b/docs/NextJs/_category_.json new file mode 100644 index 000000000..2de368dd9 --- /dev/null +++ b/docs/NextJs/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Next", + "position": 12, + "link": { + "type": "generated-index", + "description": "Next is a JavaScript library for building user interfaces. It is maintained by a community of individual developers and companies." + } + } diff --git a/docs/NextJs/emty.png b/docs/NextJs/emty.png new file mode 100644 index 000000000..97e41f5aa Binary files /dev/null and b/docs/NextJs/emty.png differ diff --git a/docs/NextJs/index.md b/docs/NextJs/index.md new file mode 100644 index 000000000..0088af346 --- /dev/null +++ b/docs/NextJs/index.md @@ -0,0 +1,64 @@ +--- +id: next-js +title: Next Js Getting Started +sidebar_label: Next JS +sidebar_position: 26 +tags: [NextJS, Routing, Page Routing] +description: This docs contains about the Next JS documentation +--- + + +## Get Started + +To start using Aceternity UI in your projects, simply install the library via your preferred package manager: + +### Next.js + +```bash +npx create-next-app@latest +``` +On Installation, you will be prompted to choose a template. Select the default template and proceed with the installation. + +```bash +What is your project named? my-app +Would you like to use TypeScript? No / Yes +Would you like to use ESLint? No / Yes +Would you like to use Tailwind CSS? No / Yes +Would you like to use `src/` directory? No / Yes +Would you like to use App Router? (recommended) No / Yes +Would you like to customize the default import alias (@/*)? No / Yes +What import alias would you like configured? @/* + +``` +After the prompts, `create-next-app` will create a folder with your project name and install the required dependencies. + +Create a root layout inside `app/layout.tsx` with the required `` and `` tags: + +```tsx +// app/layout.tsx + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} +``` +Finally, create a home page `app/page.tsx` with some initial content: + +```tsx +// app/page.tsx +export default function Page() { + return

Hello, Next.js!

+} +``` +Now, you can start the development server: + +Run `npm run dev` to start the development server. +Visit `http://localhost:3000` to view your application. +Edit `app/page.tsx` (or `pages/index.tsx`) file and save it to see the updated result in your browser.