Forem: Bharath Kumar S

Next.js 16 Type Safety: Async PageProps & Typed Routes

Bharath Kumar S — Mon, 22 Dec 2025 20:57:49 +0000

Next.js has quietly become one of the most type-safe full-stack frameworks out there — yet many teams still use only a fraction of what it offers.

In this post, I’ll walk through practical, production-ready type safety features in modern Next.js (App Router), including:

Next.js TypeScript plugin
Statically Typed Links
Route-aware type helpers
Auto complete environment variables
Typed NextRequest and NextResponse

This is not a beginner guide — it focuses on features that actually prevent bugs in real-world applications.

Next.js TypeScript plugin

Next.js ships with a custom TypeScript plugin that enhances type-checking beyond what plain tsc can do.

It understands Next.js concepts such as:

File-based routing
Server vs Client Components
Metadata APIs
Layout and page conventions

To ensure VS Code uses this plugin:

Open the Command Palette (Ctrl / ⌘ + Shift + P)
Search for TypeScript: Select TypeScript Version
Choose Use Workspace Version

This allows VS Code to pick up Next.js–specific type rules automatically via next-env.d.ts.

Once enabled, you’ll get IntelliSense and in-context documentation for Next.js-specific APIs such as metadata and caching options.

Showing available options and in-context documentation

Other useful checks provided by the plugin include:

Ensuring the "use client" directive is used correctly
Preventing client-only hooks (like useState) from being used in Server Components
Catching invalid exports in page.tsx, layout.tsx, and route.ts

Statically Typed Links

Next.js can generate statically typed routes to prevent typos and invalid navigation.

Enable typed routes in next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  typedRoutes: true,
}

export default nextConfig

Next.js will generate route definitions inside .next/types, which TypeScript uses to validate links and navigation.

This ensures:

Invalid routes are caught at compile time
Route refactors are safer
IntelliSense suggests only valid paths

Route-Aware Type Helpers

Next.js generates global route-aware helpers for App Router types. These are available without imports and are generated during next dev, next build, or via next typegen.

Available helpers include:

PageProps
LayoutProps
RouteContext

Without PageProps

export default function Details({
  params,
  searchParams,
}: {
  params: { slotId: string };
  searchParams: { name?: string };
}) {
  const { slotId } = params;
  const { name } = searchParams;

  return (
    <div>
      Slot: {slotId} <br />
      Name: {name}
    </div>
  );
}

This approach is explicit and works well for smaller components.

With PageProps

export default async function Details(props: PageProps<"/details/[slotId]">) {
  const { slotId } = await props.params;
  const { name } = await props.searchParams;

  return (
    <div>
      Slot: {slotId} <br />
      Name: {name}
    </div>
  );
}

This version is more concise and automatically stays in sync with the route definition.

Without LayoutProps

import type { ReactNode } from "react";

export default function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

With LayoutProps

export default function RootLayout(props: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        {props.children}
      </body>
    </html>
  );
}

Without RouteContext

export async function GET(
  _request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;

With RouteContext

export async function GET(
  _request: NextRequest,
  ctx: RouteContext<"/api/[id]"> // you will get intellisense
) {
  const { id } = await ctx.params;

Using RouteContext gives you full IntelliSense for route params and avoids manual typing.

Auto complete environment variables

Enable it in next.config.ts

![next env config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ozpitstpxw6dxf5g7o7.png)

Now you will get intellisense support

Typed NextRequest and NextResponse

import { NextRequest, NextResponse } from "next/server";

export async function GET(
  _request: NextRequest
) {

  return NextResponse.json(
    { msg: 'Hello!!! })
}

NextRequest extends the Web Request API with:

Typed cookies
Parsed URLs via nextUrl
Middleware-friendly helpers

NextResponse extends the Web Response API with:

json()
redirect()
Cookie helpers
Edge-friendly APIs

Final Thoughts

Next.js type safety isn’t about writing more types —
it’s about letting the framework encode architectural rules directly into your editor.

When used well, TypeScript becomes a guardrail, not a burden,
and IntelliSense becomes an extension of your system design.

Reference - Next.js - TypeScript

Connect with Me

If you enjoyed this post or want to follow my work:

LinkedIn: Bharath Kumar S
GitHub: Bharath Kumar

Feel free to connect, star my projects, or reach out — I love discussing Next.js, TypeScript, and modern frontend best practices!

JavaScript BDD cucumber api test framework

Bharath Kumar S — Fri, 17 Sep 2021 20:57:30 +0000

JavaScript BDD cucumber api Test framework

NPM packages used

@cucumber/cucumber - BDD framework
ajv - JSON schema validationm
axios - Rest Client
chai - Assert library
chai-as-promised - Assert library
cucumber-html-reporter - html reporter
dotenv - for env file

Features

ts-node(typescript execution environment for node) in cucumberOpts.
All scripts written with JavaScript & Cucumber Gerkhin.
Neat folder structures with js files easy to maintain
Page Object design pattern implementation.
Extensive hooks implemented for BeforeFeature, AfterScenarios etc in world file under support directory.
HTML report withAssert errors on failure feature scenarios.

To Get Started

Pre-requisites

1.NodeJS installed globally in the system.
https://nodejs.org/en/download/

2.Visual Studio Code or any

Setup Scripts

Clone the repository into a folder
Go inside the folder and run following command from terminal/command prompt

npm install

All the dependencies from package.json would be installed in node_modules folder.

Run Scripts

Now just run the test command which starts the test execution

npm run test

Writing Features

Feature: PurgoMalum Sanity Tests
    PurgoMalum is a simple, free, RESTful web service for filtering and removing content of profanity, obscenity and other unwanted text.

    Background:
        Given RESTful web service "https://www.purgomalum.com" is up and running

    @sanity
    Scenario Outline: Validating Response Types
        When validating RESTful web service for "<type>" response type with text "this is some test input"
        Then Validate the response "<response>"
        Examples:
            | type  | response                |
            | xml   | this is some test input |
            | json  | this is some test input |
            | plain | this is some test input |

Writing Step Definitions

Given(`RESTful web service {string} is up and running`, timeout, async function (url) {
   <!-- implementation -->
})

Schema for validation (ajv is used for JSON schema validation)

class PurgoMalumSchema {
    constructor() {
    }

    /**
   * jsonSchema for success case
   */
    jsonSchema() {
        return {
            type: "object",
            properties: {
                result: { type: "string" }
            },
            required: ["result"],
            additionalProperties: false
        }
    }

    /**
    * jsonSchema for negative case
    */
    jsonErrorSchema() {
        return {
            type: "object",
            properties: {
                error: { type: "string" }
            },
            required: ["error"],
            additionalProperties: false
        }
    }


    /**
   * xml for success case
   */
    xmlSchema(text) {
        return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><PurgoMalum xmlns="http://www.purgomalum.com"><result>${text}</result></PurgoMalum>`
    }

    /**
    * xml for negative case
    */
    xmlErrorSchema(text) {
        return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><PurgoMalum xmlns="http://www.purgomalum.com"><error>${text}</error></PurgoMalum>`
    }

}

module.exports = { PurgoMalumSchema : new PurgoMalumSchema() };

Rest Client

Rest Client is under utilities directory in Utilities.js

  /**
 * @param {string=} URL - API endpoint.
 * @param {object=} Options - headers, payload and auth.
 */
  async getRequest(URL, options = {}) {
    let response = await axios.get(URL, options);
    expect(response.status).to.match(/^20[0-2]$/);
    return response;
  }

Cucumber Hooks

Test hooks in world.js under support directory

Before(async function (testCase) {
    // console.log(testCase.gherkinDocument.feature.description)
});

After(function (testCase) {
    // console.log(testCase.result.status)
});

Docker

Following DockerFile is used to create a docker image and run the container

FROM node:16-alpine3.14

WORKDIR /app

# copy project files
COPY . .

# dependencies will be installed only if the package.json file changes
RUN npm ci

# rerun E2E tests only if any of the previous files change
CMD npm run test

# Simple docker file just for demonstration. Advanced concepts to be included in docker compose or groovy script is jenkins pipeline

HTML Reports

report.js is used to backup the existing html report to history folder.

Current report is in report directory.

npm run report

Git repo : https://github.com/Bharath-Kumar-S/node_bdd_api_tests/
I hope this was helpful. Please leave your feedback.

Cypress Assertions

Bharath Kumar S — Sun, 07 Feb 2021 17:46:49 +0000

What is Cypress?
Cypress is a next generation front end testing tool built for the modern web. Learn about Cypress.io and its features.

Cypress bundles the popular Chai assertion library, as well as helpful extensions for Sinon and jQuery, bringing you dozens of powerful assertions for free.

Cypress bundles chai no need to add as a dependency to your project.

Pre-requisites

Install Node.js and npm https://www.npmjs.com/get-npm

Setup

create a directory for the project and cd to it: mkdir cypress-assertions && cd cypress-assertions
Run npm init --y to setup a new npm package project.
Install Cypress via npm npm i cypress --save-dev.
Verify Cypress by running npx cypress open.
Now cypress folder along with cypress.json file will be created in the project directory.
"integration" folder contains cypress test examples.
Ignore the examples folder by adding as ignored test is cypress.json

{
    "ignoreTestFiles": "**/examples/*.js"
}

Creating and Run Tests
Under the “integration” folder create a new file. Name it “sample_assert.js”

/// <reference types="cypress" />

describe('Sample assert', () => {
    it('first test', () => {
       expect(2).to.equal(2);
     })
 })

In beforeEach block specify the url that needs to be navigated before each test.

/// <reference types="cypress" />

describe('Sample assert', () => {

beforeEach(() =>{
        cy.visit(`https://example.cypress.io/commands/actions`);
})

it('first test', () => {
       expect(2).to.equal(2);
})

})

Check for Visibility of element.

 it(`Assert - Visibility of element`,()=>{
        cy.get(`[id="email1"]`).should(`be.visible`);
 })

Check for Disabled element.

 it(`Assert - Disabled element`,()=>{
        cy.get(`textarea`).should(`be.disabled`);
 })

Check for Focused element.

it(`Assert - Focused element`, () => {
        cy.get('.action-focus').focus()
            .should(`be.focused`)
})

Check for blank input box

it(`Assert - Blank Input box`, () => {
        cy.get(`[id="email1"]`).should(`have.value`,``);
})

Check if checkbox is checked

it(`Assert - Checkbox is checked`, ()=>{    
 cy.get(`[value="checkbox1"]`).first().click().should(`be.checked`)
    })

Check for Object comparison

it(`Assert - Object assertions`,() => {
        let obj = {
            name: 'Bharath' 
        }
        expect(obj).to.deep.equal({ name: 'Bharath' })
    })

Git repo: https://github.com/Bharath-Kumar-S/cypress-assertions

I hope this was helpful. Please leave your feedback.

API Tests with Cypress.IO

Bharath Kumar S — Sat, 06 Feb 2021 17:17:42 +0000

What is Cypress?
Cypress is a next generation front end testing tool built for the modern web. Learn about Cypress.io and its features.

Pre-requisites

Install Node.js and npm https://www.npmjs.com/get-npm
Any API you would like to use

Setup

create a directory for the project and cd to it: mkdir cypress-api-automation-tests && cd cypress-api-automation-tests
Run npm init --y to setup a new npm package project.
Install Cypress via npm npm i cypress --save-dev.
Verify Cypress by running npx cypress open.
Now cypress folder along with cypress.json file will be created in the project directory.
"integration" folder contains cypress test examples.
Edit the "cypress.json" file to add baseURL for all the tests

{
"baseUrl": "https://jsonplaceholder.typicode.com/"
}

Creating and Run Tests

Under the “integration” folder create a new file. Name it “typicode-api-test.js”

/// <reference types="cypress" />

describe('JSON Typicode', () => {
    it('Get all user posts', () => {
       cy.request('/posts')
       .then((response) => {
           expect(response.status).to.equal(200);
        })
     })
 })

2.In Cypress, run the test and notice the results.

Try to assert on few other other objects returned in the response and verify it’s working properly.

Example Assertions
Check for available keys in the response object.

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }

We need to check if userId, id, title and body keys are present in the response object.

/// <reference types="cypress" />

describe('JSON Typicode', () => {
    it('Get all user posts', () => {
        cy.request('/posts')
            .then((response) => {
                let first_response_object = Object.keys(response.body[0]);
                let keys = [`userId`, `id`, `title`, `body`];
                for (let key of keys) {
                    expect(first_response_object).to.includes(key)
                }
            })
    })
})

result will be

Note

Object.keys(object) will return array of available keys.
And we iterate over the keys array and asserted with includes method.

Post a new user post.
request body will be the following

{
            "userId": 1,
            "id": 1,
            "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
            "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
          }

Ignore the examples folder by adding as ignored test is cypress.json

{
    "baseUrl": "https://jsonplaceholder.typicode.com/",
    "ignoreTestFiles": "**/examples/*.js"
}

Git repo : https://github.com/Bharath-Kumar-S/cypress-api-automation-tests

I hope this was helpful. Please leave your feedback.