# Setting up Typscript env You will need to install several vital tools to set up your Windows 11 PC to successfully develop your TypeScript and Next.js website. Here’s a step-by-step guide: #### 1. **Install Node.js and npm** **Node.js** is required to run JavaScript/TypeScript outside of a browser. When you install Node.js, it comes with **npm** (Node Package Manager), which is used to install libraries and tools. * Visit [Node.js Downloads](https://nodejs.org/en/download/). * Download and install the **LTS version** (as it’s more stable). * After installation, verify the installation by running the following commands in your terminal (Command Prompt or PowerShell): ```bash node -v npm -v ``` This will display the version of Node.js and npm, confirming they were installed successfully. #### 2. **Install Git** You’ll likely need **Git** for version control and working with GitHub or other Git-based repositories. * Visit the [Git website](https://git-scm.com/download/win) to download and install Git. * During installation, choose the default options unless you need a specific configuration. * Verify the installation by running the following command: ```bash git --version ``` #### 3. **Install Visual Studio Code (VS Code)** **VS Code** is a lightweight yet powerful code editor with excellent support for TypeScript, Next.js, and JavaScript. * Download and install [Visual Studio Code](https://code.visualstudio.com/). * After installation, open VS Code and install the following extensions to enhance your development experience: * **ESLint** (for linting your code) * **Prettier** (for code formatting) * **TypeScript** (for TypeScript support) * **Next.js Snippets** (for Next.js-specific code snippets) * **GitLens** (for better Git integration) #### 4. **Install Next.js** Next.js requires you to initialize a new project. First, you’ll need to install it using **npm** or **yarn**. 1. Open your terminal and run the following command to install **Next.js** with **create-next-app**: ```bash npx create-next-app@latest ``` 2. Follow the prompts to set up your Next.js app. This will automatically install all necessary dependencies. 3. Change into your project directory and start the development server: ```bash cd your-project-name npm run dev ``` Your Next.js app should now be running at `http://localhost:3000`. #### 5. **Install TypeScript** Next.js supports TypeScript out of the box. However, you may need to install TypeScript if it’s not included: 1. Inside your project directory, run the following command to install TypeScript and the necessary type definitions: ```bash npm install --save-dev typescript @types/react @types/node ``` 2. Create a `tsconfig.json` file in the root directory of your project by running: ```bash npx tsc --init ``` This command initializes the TypeScript configuration for your project. #### 6. **Install Docker (Optional but Recommended)** If you plan to work with containers for local development or for deployment, you’ll need **Docker**: * Download and install Docker Desktop from [here](https://www.docker.com/products/docker-desktop). * After installation, verify Docker is running by running: ```bash docker --version ``` #### 7. **Install GCP / AWS CLI** To interact with your GCP or AWS environment directly from your terminal, you’ll need their respective CLI tools: **For GCP:** 1. Download the [Google Cloud SDK](https://cloud.google.com/sdk/docs/install). 2. Follow the instructions to install it on Windows. 3. Authenticate your SDK using: ```bash gcloud init ``` **For AWS:** 1. Download and install the [AWS CLI](https://aws.amazon.com/cli/). 2. Configure the CLI using your AWS credentials: ```bash aws configure ``` You’ll be prompted to enter your **Access Key ID**, **Secret Access Key**, **Region**, and **Output Format**. #### 8. **Install Stripe CLI (for payments)** To test and develop payment flows locally, Stripe provides a CLI tool: 1. Download the [Stripe CLI](https://stripe.com/docs/stripe-cli) for Windows. 2. After installation, authenticate it using your Stripe account by running: ```bash stripe login ``` 3. You can use the Stripe CLI to forward webhooks, test payments, and more: ```bash stripe listen --forward-to localhost:3000/api/webhooks ``` #### 9. **Install Postman (Optional but Helpful for API Testing)** Postman is a powerful tool that lets you easily send requests and inspect responses when testing your APIs. * Download and install [Postman](https://www.postman.com/downloads/). #### 10. **Install Linter and Formatter (ESLint and Prettier)** Ensure consistent code quality by setting up **ESLint** and **Prettier**: 1. Inside your Next.js project, install ESLint and Prettier: ```bash npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev ``` 2. Create a `.eslintrc.json` file for your ESLint configuration and a `.prettierrc` file for Prettier. This helps enforce code quality and formatting throughout your project. #### Final Checks: * Make sure all tools and configurations are working correctly by running a simple `npm run dev` command to start your Next.js app, and ensure it runs successfully in your browser. By setting up these tools, you'll have a robust development environment on Windows 11 to develop your TypeScript and Next.js website successfully. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.noestafacil.com/the-section-on-software-engineering/software-engineering/toolkits/developing-on-a-windows-11-machine/setting-up-typscript-env.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.