Last checked and updated on 01 Jun 2026
What Is New in Next.js 9
Next.js 9 delivers a foundational upgrade with a built-in API layer and a more intuitive routing system. It shifts the framework closer to a full-stack solution while significantly improving the developer experience and build performance.
| Category | Key Updates |
|---|---|
| New Features | API Routes, Dynamic Routing, Automatic Static Optimization |
| Performance | Faster builds with Webpack 4, Production diagnostics |
| Developer Experience | Integrated Environment Variables, Improved next/dynamic, Enhanced error messages |
| Under the Hood | New React Profiling support, Updated Babel & Sass integration |
How does Next.js 9 handle backend API creation?
It introduces API Routes, letting you build your API directly within the project. You create files inside pages/api, and each file maps to an API endpoint. This removes the need for a separate backend server for basic Node.js functions.
In practice, a file like pages/api/user.js exports a default request handler. You get access to the standard Node.js request and response objects, making it simple to connect to databases or external services.
// pages/api/hello.js
export default (req, res) => {
res.status(200).json({ name: 'Next.js 9' })
}What changed with routing in this version?
Dynamic Routing received a major overhaul, moving beyond the basic file-system naming. You now use brackets ([param]) directly in page filenames, like pages/post/[id].js. This feels more intuitive compared to the old pages/post.js?query pattern.
The router provides the dynamic parameters via useRouter or getInitialProps. This matters because it enables cleaner URLs and better separation of concerns for complex applications, blending static generation with dynamic data fetching seamlessly.
How does Automatic Static Optimization benefit my app?
This feature automatically determines which pages can be pre-rendered to static HTML. If a page doesn't have getInitialProps, Next.js 9 will prerender it to a static file during build time, offering the performance benefits of a static site.
It's a hybrid model. Your app can contain both statically optimized pages and server-rendered ones without extra configuration. This leads to faster page loads and efficient resource usage on your hosting platform.
Build System & Tooling Upgrades
The build system got a speed boost from the update to Webpack 4 and improved caching. Development server startup and hot reloading are noticeably faster, which is a big deal for larger projects.
Environment variable support is now built-in. You can use .env.local for environment-specific variables, and they are exposed to the browser by prefixing with NEXT_PUBLIC_. This replaces the need for custom webpack configuration in many cases.
FAQ
Do I need a custom server to use API Routes?
No. API Routes are designed to work with the default Next.js server. They are deployed as serverless functions on platforms like Vercel, eliminating the need for a custom Node.js server setup.
Can I use the old dynamic route pattern with a query string?
Yes, the old pattern still works for backward compatibility. However, the new bracket syntax ([param]) is the recommended approach for new projects as it provides a more structured and predictable routing system.
How do I access query parameters in a dynamically routed page?
Use the useRouter hook from next/router in functional components, or withRouter for class components. The dynamic segment will be available in the query object (e.g., router.query.id).
What happens to my existing environment variable setup?
If you were using dotenv or webpack's DefinePlugin, you can migrate to the built-in support. Create a .env.local file and prefix client-side variables with NEXT_PUBLIC_. The new system is more integrated and zero-config.
Is Automatic Static Optimization compatible with getStaticProps or getServerSideProps?
No, those data fetching methods were introduced in later versions (Next.js 9.3+). In Next.js 9.0, static optimization is based solely on the absence of getInitialProps. Pages with getInitialProps will still be server-side rendered.