Next.js First Impressions

Next.js is built on React. It has automatic page routing and supports both JavaScript and TypeScript. What's there not to like?

My lab project is available for immediate clone here

• New Project spin up time: 1 minute.

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

• I Did receive a warning to update browserlist. Make sure to cd to the new directory just created.

npx browserslist@latest --update-db

• Sample index.js page easy to read and alter.
• Embedded styles : Not so great, no auto-completion. Stuff like this, which is a React JSX thing.

 <style jsx>{`
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
...

• Starting dev instance: Fast..

 npm run dev

• Autoreload : Yes
• Package.json dependencies: Just three:

  "dependencies": {
    "next": "^10.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }

It's built on top of React but includes auto-routing. Let's investigate.

Create a file in the pages folder named 'time.js', and add this code:

export default function Time() {
 const [time, setTime] =
  useState(
 new Date()
.toLocaleTimeString()
  );

setInterval(() => {
 setTime(
  new Date() 
   .toLocaleTimeString()
  );
}, 1000);
return (
    <div>
      <h3>Time</h3>
      <p>{time}</p>
    </div>
  );
}

Navigate to

http://localhost:3000/time

Reminds me of younger days learning to ride a bike and taking my hands off the handlebars, except there was no imminent crash here.

Remove JSX styles
One thing became clear; just creating a folder named Styles with a file named globals.css, then attempting to import on the home page doesn't work.

Definitely a user error here, time to read the docs.

Global Styles

Next uses convention over configuration. If there is a file named _app.js in the pages folder, this file will serve to enable a global style.

import '../styles/globals.css'
export default function 
 MyApp({ Component, pageProps }) 
{
 return 
  <Component {...pageProps}/>
}

There must be a 'styles' folder and a file named globals.css.

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Robot, Oxygen,
    Ubuntu, Cantrell, Firas Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
}

_app.js

This is the main site template page. For example if we want something on every page of the site. We put in the file _app.js in the pages folder.

import "../styles/globals.css";
export default function 
MyApp({ Component, pageProps }) 
{
 return(
  <div>
    <h1>On every page</h1>
    <Component {...pageProps} />
  </div>
  );
}

This gives us the ability to template the entire site's layout and style to apply at a global layer.

The code above represents a compositional pattern whereby the the page is injected with a Component and Props. The very same component and props are returned except, the component has been decorated with new properties. This is a 'decorator pattern'.

So far, this is a very simple framework, it serves pre-compiled pages making the rendering ultra fast, templating and global styling that's too easy, automatic routing. This is a very nice start.

There's a lot to like about Next.js

Coming up... Adding page styling apart from the global style.

JWP2021 Next.js