# Next JS

Installation
Build commands
Comparison
Page content
Dynamic Routing
Layouts
Images
Styles
Infrastructure
Hosting
References

via GIPHY

# Installation

Requirements:

Node ^v14.7.0
Yarn installed

Automatic setup method using npx (opens new window) is the easiest:

npx create-next-app@latest

Then cd into your created directory and run yarn dev

# Build commands

yarn dev

This is the command you run when building your website, because it comes with hot-reloading etc
Preview your changes on the localsever at http://localhost:3000.

yarn build

Generates the .next director, and builds the application ready for deployment on a remote server.

yarn start

Differs from yarn dev, as this command is for previewing the production version of your Next JS App.

Note - Note that Next (annoyingly) doesn't support HTTPS for local development (opens new window) out the box. This is why you might see an SSL error.

One of the key differences between Next and Gatsby is that Gatsby is a static site generator. This means that you can develop the site using React but the actual website that the user interacts with, is a static site.

For example, running the build commands in Gatsby, will generate the public folder, it will bascially export your React application (JSX and all) into HTML and JavaScript.

Next JS is different because it's build command will also come with a server. This means it will require Node to be installed on the server it is hosted.

It will also makes Server Side rendering possible (SSR), which is beneficial for a number of reasons:

If the HTML content for a page is likely to change based on the users actions
The HTML / page content doesn't need to wait to be loaded before the JavaScipt.
The content displayed and the HTML markup is consistent with each other (SEO related again)

The last point is useful from a SEO standpoint.

Therefore, a static site generator might be more beneficial for a Blog, and server side rendering may be more useful for Forums, eCommerce sites etc. i.e. You develop the site using React, but the production process doesn't involve a server. You simply host the generated HTML.

Another key difference is the frameworks differ in terms of how opionated they are regarding data fetching. Gatsby more or less requires GraphQL, whereas Next JS can be used with a variety of Headless platforms including Sanity.

NOTE: Next JS can also be used to create a static site. For example, one of the build commands next build && next export will export the site as static HTML.

Further research: This is a good reference (opens new window) for comparing the differences between Gatsby and Next JS.

# Pages

The pages are essentially React components that live in the Pages. The routes (opens new window) are based on their file name.

You can approach the syntax it however you like, and write as a JavaScript arrow function.

/* basic page function */
const About = () => {
    return <div>
        <h1>About us</h1>
        <a href="/">return to home</a>
    </div>
}

export default About;

# Dynamic routing

You can also set up Dynamic routing (opens new window), for example post/[id].js. Anything with the square brackets means it will have a template.

Dynamic routing occassionally usually requires Next's useRouter API.

# Layouts & Components

All of the markup will be used as JSX (opens new window).

You can create your own reusable components specifically for layouts, for example Navbar, Sidebar, Footer.

You can also pass in props the same way you would any other React application.

Also Next JS will have a lot of Native API's to help with web development. Some of key ones are:

<Head /> - For adding the meta data used in a page.
<Link /> - For adding links and uses href attributes as props.
<Images /> - Same as the above but for imagesetc.

Note: your ES6 function expressions can take multiple expression forms:

/* anonymous function */
export default () => {} // Works!

/* regular function */
function Footer() {} // Works!!

/* arrow syntax function */
const Footer = () => {} // Works!!!

/* regular function with inline export */
export defeault function Footer() {} // Also Works!!!!

Why is it useful to be aware of how many ways there are to declare functions inside components? Typical of other JavaScript applications, it's because you may need to vary at which stage you run the function inside the component. For example, you may need to render some props for dynamic routing, before exporting the function. In this scenario, you would need to use the arrow syntax.