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
Top comments (0)