next

Page-based routing

Next.js provides a file-system-based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route.

export default function Home() {
  return <div>Welcome to Next.js!</div>
}

API Routes

Next.js allows you to create API endpoints as part of your Next.js application. These are server-side functions that you can deploy alongside your application.

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

Static Generation and Server-Side Rendering

Next.js supports two forms of pre-rendering: Static Generation and Server-Side Rendering. This feature allows you to generate HTML in advance for optimal performance.

export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

Built-in CSS and Sass Support

Next.js allows you to import CSS and Sass files directly within your JavaScript components, providing a streamlined development experience.

import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Automatic Code Splitting

Next.js automatically splits your code into small bundles that are loaded as needed, improving load times and performance.

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/hello'));

export default function Home() {
  return <DynamicComponent />
}