“404 page not found” with Typescript, NextJS, Now CLI in Vercel Vercel

Explanation of the problem

This error is likely caused by the fact that you are using the now dev command, which is for testing your deployment on the local system, and not meant for development. The now dev command does not run the Next.js development server and instead uses the Now platform’s own development server, which may not be configured to handle Next.js pages.

To resolve this issue, you should use the next dev command instead, which will start the Next.js development server and serve your UI correctly. If you need to run your application on the Now platform, you can use the now command to deploy it, but for local development, you should use the next dev command.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for “404 page not found” with Typescript, NextJS, Now CLI in Vercel  Vercel

The problem of getting a “404 page not found” when running “npx now dev –verbose” is likely caused by NextJS not being able to find the correct pages directory in the Now CLI. To solve this, you need to update the now.json file with the correct configuration.

Here’s what the now.json file should look like:

{
  "version": 2,
  "alias": "my-alias",
  "name": "admin-portal",
  "builds": [
    {
      "src": "next.config.js",
      "use": "@now/next"
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/pages/$1" }
  ],
  "build": {
    "env": {
      "NPM_TOKEN": "@npm_token",
      "API_URL": "@api_url",
      "IS_NOW": "true"
    }
  }
}

This change will route all requests to the /pages directory, which is where NextJS is expecting to find your pages.

Try running npx now dev --verbose again and see if the problem is solved.

Other popular problems with Vercel Vercel

Problem: Routing issues with Next.js in Vercel

One common problem with using Vercel and Next.js is routing issues. This is because the Next.js framework handles routing differently from traditional static hosting.

Solution:

To resolve this issue, you can use the vercel-next-routes package, which allows you to define custom routes for your Next.js app. You can also make use of the Router component from the next/router package to programmatically navigate between pages. Additionally, you can configure the Vercel platform to correctly handle the file structure of your Next.js app by setting the build.public and build.pages fields in your vercel.json file.

Problem: Slow build times with Vercel

Another common issue with Vercel is slow build times. This can occur when you have a large number of files, images, or dependencies in your project, which can slow down the build process.

Solution:

To resolve this issue, you can optimize your project’s build process by minifying your CSS and JavaScript files, compressing images, and using lazy loading for images. Additionally, you can make use of Vercel’s caching features to cache your build artifacts and reduce the time it takes to build your project. Finally, you can use a CDN service to serve your static assets, which can also help improve build times.

Problem: Error handling in Vercel Functions

Another common issue with Vercel is handling errors in your serverless functions. This can occur when your function throws an error or returns an unexpected response, which can result in a 500 error for your users.

Solution:

Vercel (previously known as Zeit Now) is a cloud-based platform for web development and hosting. It provides an easy-to-use environment for developers to build, test, and deploy web applications and websites. The platform supports various programming languages and frameworks, including Node.js, React, Next.js, and many others. Vercel integrates with popular version control systems, such as Git, and automatically builds and deploys applications whenever new changes are pushed to the connected repository.

Vercel leverages serverless technology, allowing developers to focus on writing code rather than managing servers. The platform abstracts away the infrastructure, providing automatic scaling and high availability for deployed applications. It also offers features such as environment variables, secrets management, and custom domains, which further simplify the development and deployment process. Additionally, Vercel provides detailed insights and metrics for deployed applications, making it easier for developers to monitor and optimize performance.

Most popular use cases for Vercel Vercel

1. Hosting Web Applications: Vercel is an all-in-one platform that can be used for hosting a wide range of web applications. This includes Single-Page Applications (SPAs), static sites, and dynamic applications built with Next.js, Nuxt.js, React, and other popular frameworks. The platform provides a simple and seamless deployment process that makes it easy for developers to get their applications up and running quickly.
2. Continuous Deployment: Vercel integrates with a variety of Git providers, including GitHub, GitLab, and Bitbucket, to provide continuous deployment for web applications. This means that every time code changes are pushed to a repository, the platform automatically builds and deploys the latest version of the application. This streamlines the development process and makes it easy for teams to quickly iterate on their applications.
3. Serverless Functions: Vercel also provides a serverless function environment, powered by AWS Lambda, that makes it easy to run backend logic in response to HTTP requests. This allows developers to add dynamic functionality to their applications without the need to manage servers or infrastructure. An example of using a serverless function in Vercel with a code block in JavaScript would look like this:

export default (req, res) => {
  res.json({
    message: "Hello, World!"
  });
};