Update package templates and dependencies

docs/docs/intro.md

@@ -15,7 +15,7 @@ Get started by **creating a new application**.
 - [Node.js](https://nodejs.org/en/)
 - [pnpm](https://pnpm.js.org/en/installation)
 - [ABP Framework](https://abp.io/)
-- [.Net 7](https://dotnet.microsoft.com/download/dotnet/7.0)
+- [.Net 8](https://dotnet.microsoft.com/download/dotnet/8.0)
 
 ## Generate a new application
 
@@ -30,16 +30,25 @@ dotnet new install Anto.Abp.React.Template
 Create a new project using the template
 
 ```bash
-dotnet new abp-react -o my-project-name
+dotnet new abp-react -o my-project-name --apiUrl abp.antosubash.com
 ```
 
 > Note: You can use any name for the project. I used `my-project-name` for this example. keep in mind that the project name should be in kebab case (all lowercase and words separated by hyphens) because it will be used as the name of the packages org name.
 
-### Running the project
+### Install the dependencies
 
 ```bash
 cd my-project-name
 pnpm install
+```
+
+### Update the Environment Variables
+
+I have added the sample environment variables in the `.env.sample` file. You can update the values according to your project.
+
+### Running the project
+
+```bash
 pnpm dev
 ```
 

docs/docs/tutorials/create-a-page.md

@@ -6,4 +6,40 @@ sidebar_position: 1
 
 This guide will explain how to create a page in ABP React.
 
-Coming soon...
+Abp React uses Next.js Page system to create pages. You can create a new page by creating a new file in the `pages` directory of the project. The file should be a `.tsx` file and should export a React component.
+
+## Creating a new page
+
+To create a new page, follow these steps:
+
+1. Create a new file in the `pages` directory of the project.
+2. The file should be a `.tsx` file.
+3. The file should export a React component.
+4. You can use the `useRouter` hook from Next.js to get the current route.
+5. You can use the hooks from the `@abpreact/hooks` package to get the current user and the current tenant.
+
+Here is an example of a simple page:
+
+```tsx
+import { useRouter } from "next/router";
+import { useCurrentUser } from "@abpreact/hooks";
+
+export default function MyPage() {
+  const router = useRouter();
+  const currentUser = useCurrentUser();
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <p>Current Route: {router.pathname}</p>
+      <p>Current User: {currentUser?.userName}</p>
+    </div>
+  );
+}
+```
+
+Now you can access the page by visiting the route in the browser. For example, if the file is named `my-page.tsx`, you can access the page by visiting [http://localhost:3000/my-page](http://localhost:3000/my-page).
+
+## Next Steps
+
+Now that you have created a page, you can start adding more functionality to it. You can use the hooks from the `@abpreact/hook` package to get the current user and the current tenant. You can also use the hooks from the `@abpreact/ui` package to add UI components to the page.

src/apps/abp/src/pages/my-page.tsx

@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router';
+import { useCurrentUser } from '@abpreact/hooks';
+
+export default function MyPage() {
+	const router = useRouter();
+	const currentUser = useCurrentUser();
+
+	return (
+		<div>
+			<h1>My Page</h1>
+			<p>Current Route: {router.pathname}</p>
+			<p>Current User: {currentUser?.userName}</p>
+		</div>
+	);
+}