next

What is next?

The 'next' npm package is a popular framework for building server-side rendered and statically generated React applications. It provides a set of features that simplify the development of modern web applications, including page-based routing, pre-rendering, automatic code splitting, and API routes.

What are next's main functionalities?

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 />
}

Other packages similar to next

gatsby

Gatsby is a React-based static site generator that provides similar functionalities to Next.js, such as pre-rendering and code splitting. However, Gatsby is more focused on static site generation, whereas Next.js offers a hybrid approach with both static generation and server-side rendering.

nuxt

Nuxt.js is a framework based on Vue.js that offers functionalities similar to Next.js but for Vue.js applications. It provides server-side rendering, static site generation, and automatic code splitting, much like Next.js does for React applications.

create-react-app

Create React App is a boilerplate to create single-page React applications. It sets up a development environment and builds scripts but does not offer server-side rendering or static site generation out of the box like Next.js does.

sapper

Sapper is a framework for building web applications using Svelte, offering server-side rendering and static site generation. It's similar to Next.js in terms of goals but is designed for Svelte instead of React.

README

node-ext - Node.js extensions

Functions that complement Node.js API.
It's work in progress, new methods are added when needed.

Installation

$ npm install next

Usage

var nfs   = require('next/lib/fs')
  , npath = require('next/lib/path');

nfs.fileExists(filepath, callback);
dirpath = npath.trim(dirpath);

Alternatively you can import each function individually

var fileExists = require('next/lib/fs/file-exists')
  , pathTrim   = require('next/lib/path/trim');

fileExists(filepath, callback);
dirpath = pathTrim(dirpath);

Extensions

Each extension is documented at begin of its source file.

• findPackageRoot(path)
• getRequire(path)
• isModuleNotFoundError(error, path)
• requireInContext(path, context)
• requireSilent(path)

child_process

• child_process.pipe

fs

• fs.copy
• fs.copySync
• fs.dirExists
• fs.fileExists
• fs.readdirFilesDeep

path

• path.relative
• path.trim