Learning Next.js

• Part 1: Reviewing React
• Part 2: Pages
• Part 3: Links and Head
• Part 4: Dynamic Routing
• Part 5: Serverless API

Next.js is a JavaScript framework based on React for rapidly developing web sites and applications.

Pages

React is designed for creating single-page applications (SPA). It exceeds at creating different components and having them being a part of different relationships between them within a single page or application.

Next.js is designed for allowing developers to create both single-page applications AND multiple-page sites. In fact, Next.js expects that a site will have different pages and even provides functionality for directly creating them based on their filename.

/pages

Any file with a “.js” ending within the folder named “pages” will be translated into a page with the same name. For example, an “index.js” and “about.js” files will become “/index” and “/about”.

React Rendered

Next.js is based on React. All pages (files in the “/pages”) are treated as their own components automatically. Anything that is exported is assumed to also contain JSX and will be translated as such. There is no need to import React. It is assumed it will be there.

export default () => <div>This is the index page.</div>;

React Components Can Explicitly Be Used

import React from 'react';

class Example extends React.Component {

  render() {

    return(
      <p>This is an example page.</p>
    );

  }

}

export default Example;

Public Folder

Next.js also provides the ability to include static resources through an optional “/public” folder.

Any files, such as media, that are needed for the site or application can be included in a “/public” folder. Their paths will be assumed to be the same as the “/pages” folder itself, the root. (This can be changed through other, advanced settings.)

Play with Repl.it Example!