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.

• 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):

  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 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:

  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.

• 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:

   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:

   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:

   npm install --save-dev typescript @types/react @types/node

2. Create a tsconfig.json file in the root directory of your project by running:

   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.

• After installation, verify Docker is running by running:

  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.

2. Follow the instructions to install it on Windows.

3. Authenticate your SDK using:

   gcloud init

For AWS:

1. Download and install the AWS CLI.

2. Configure the CLI using your AWS credentials:

   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 for Windows.

2. After installation, authenticate it using your Stripe account by running:

   stripe login

3. You can use the Stripe CLI to forward webhooks, test payments, and more:

   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.

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:

   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.