Next with Express and Babel

Next with Express and Babel is a boilerplate skeleton for Next.js applications that use a custom Express server, with Babel transpiling the server-side files separately from the client configuration.

What is Next with Express and Babel?

Next with Express and Babel is a minimal GitHub repository that provides a starting point for Next.js apps that need a custom Express server. It is similar to the official custom-server-express example but adds a separate Babel configuration for transpiling the Express server files, so the client and server transpilation settings are independent. The project runs on localhost:3000 and includes npm scripts for development, building, and starting the application.

Key Features

• Separate client and server transpilation — The repository separates the Next.js client transpilation config from the Babel config used for the Express server, letting you adjust each independently.
• Custom Express server — Uses Express as the custom server for Next.js, giving developers direct control over HTTP routes and middleware.
• Babel-compiled server code — Server files are processed with Babel, allowing modern JavaScript syntax in the Express codebase.
• Three npm scripts — package.json includes npm run dev, npm run build, and npm run start for local development and production deployment.
• Default localhost:3000 — The skeleton is configured to serve the app on the standard Next.js development port.

Who is it for?

• Next.js developers who need a custom Express server and prefer to write server code with modern JavaScript or JSX using Babel.
• Developers studying Next.js configuration who want a concrete reference for separating client and server transpilation settings.
• Teams building API or middleware-driven Next.js apps that require custom server-side logic beyond Next.js's built-in server capabilities.

What can you do with it?

• Start a custom-server project: Clone the repository, run npm install and npm run dev, then add Express routes alongside Next.js pages.
• Configure server transpilation: Use the separate Babel config to enable specific presets or plugins only for server files.
• Learn config separation: Examine the repository structure to see how client and server configurations are organized independently.

How does it work?

The repository defines npm scripts that install dependencies, start the development environment, and build and launch a production version. For development, run npm install followed by npm run dev; for production, run npm install, then npm run build, then npm run start. The project defaults to localhost:3000.

Alternatives

• custom-server-express — The official Next.js example this skeleton is based on, but without the separate server-side Babel configuration.

FAQ

How do I run this project?

Run npm install to install dependencies, then use npm run dev for development. For production, use npm run build followed by npm run start.

What is the difference from the official custom-server-express example?

The README states that this skeleton demonstrates separating your client transpilation config from both the Next.js and Express server configs, whereas the official example does not split those configs.

What port does it use?

The project defaults to live on localhost:3000.

Is this project free to use?

It is a public GitHub repository, so it can be freely viewed and used.