DEV Community

Cover image for Next.js First Impressions
JWP
JWP

Posted on • Edited on

Next.js First Impressions

#nextjs

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"
Enter fullscreen mode Exit fullscreen mode
  • I Did receive a warning to update browserlist. Make sure to cd to the new directory just created. 
npx browserslist@latest --update-db
Enter fullscreen mode Exit fullscreen mode
  • 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; ...
Enter fullscreen mode Exit fullscreen mode
  • Starting dev instance: Fast.. 
 npm run dev
Enter fullscreen mode Exit fullscreen mode
  • Autoreload : Yes
  • Package.json dependencies: Just three: 
 "dependencies": { "next": "^10.0.0", "react": "17.0.1", "react-dom": "17.0.1" }
Enter fullscreen mode Exit fullscreen mode

stars

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> ); }
Enter fullscreen mode Exit fullscreen mode

Navigate to

http://localhost:3000/time
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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.

Alt Text

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}/> }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

_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> ); }
Enter fullscreen mode Exit fullscreen mode

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'.

stars

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

stars

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

JWP2021 Next.js

Top comments (0)