API Routes return 404 "This page could not be found"

Bug report

Describe the bug

I have just upgraded to v9.0.2 and I want to implement API Routes as part of my solution. When I follow the documentation and navigate to the path where the API Route should be, I get the default 404 page with “This page could not be found”.

To Reproduce

I have followed the example in the examples folder, so I’ve added the path /pages/api/people/index.ts.

The contents of this file is

import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ title: 'Next.js' });
};

I then start the app and navigate to http://localhost:3000/api/people where I see the 404 page

You’ll probably also want to know what is in my next.config.js file so that looks like this

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');
const withImages = require('next-images');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

require('dotenv').config();

const {
  ANALYZE_BUNDLE: analyzeBundle,
  IS_LOCAL: isLocal,
  STAGE: stage,
} = process.env;

module.exports = withPlugins(
  [
    [withImages],
    [withCss],
    [
      withSass,
      {
        cssModules: true,
        cssLoaderOptions: {
          importLoaders: 1,
          localIdentName: isLocal ? '[name]__[local]--[hash:base64:6]' : '[hash:base64:6]',
        },
      },
    ],
    [
      withBundleAnalyzer,
      {
        analyzeServer: ['server', 'both'].includes(analyzeBundle),
        analyzeBrowser: ['browser', 'both'].includes(analyzeBundle),
        bundleAnalyzerConfig: {
          server: {
            analyzerMode: 'server',
            analyzerPort: 8888,
          },
          browser: {
            analyzerMode: 'server',
            analyzerPort: 8889,
          },
        },
      },
    ],
  ], {
    env: {
      STAGE: stage,
    },
    target: 'serverless',
    pageExtensions: ['tsx'],
    webpack(config, options) {
      if (options.isServer) {
        // Type checking on build
        config.plugins.push(new ForkTsCheckerWebpackPlugin());
      }

      return config;
    },
  },
);

Also worth noting that since updating to v9 I see this in the console output when I build.

Found experimental config:
Experimental features can change at anytime and aren't officially supported (use at your own risk).

I don’t know what is considered experimental about my configuration, but perhaps this could be related?

Expected behavior

I expect to see a JSON response of

{ title: 'Next.js' }

Screenshots

See above

System information

• OS: MacOS
• Browser Chrome, Postman
• Version of Next.js: 9.0.2

Additional context

The example in the examples folder works for me and I’ve copied that as closely as I can. I do think it’s something with my solution but I can’t figure out the root cause. Also I can’t provide a repository as it’s market sensitive but I’m happy to provide code samples as needed.

[mattdell]

Sorry for the delay, but I got sidetracked with some other work. But - I’ve figured it out!

Removing this line in my next.config.js solves the problem

pageExtensions: ['tsx'],

It makes sense given that my filename was index.ts

Funny enough it’s very related to #6878 which I raised ages ago. I’m assuming since Next v9 natively supports TypeScript I no longer need to specify the extension.

[Timer]

Unrelated, but be sure to remove ForkTsCheckerWebpackPlugin from your webpack configuration. This is already handled in Next.js 9.