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.
Open your terminal and run the following command to install Next.js with create-next-app:
npx create-next-app@latest
Follow the prompts to set up your Next.js app. This will automatically install all necessary dependencies.
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:
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
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:
Download the Google Cloud SDK.
Follow the instructions to install it on Windows.
Authenticate your SDK using:
gcloud init
For AWS:
Download and install the AWS CLI.
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:
Download the Stripe CLI for Windows.
After installation, authenticate it using your Stripe account by running:
stripe login
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:
Inside your Next.js project, install ESLint and Prettier:
npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev
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.
Last updated