Next.js First Impressions
Tags: nextjs
Published: 2021-02-14 21:32:55

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](https://github.com/Javaman2/Nextjs)

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

```html
 <style jsx>{`
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
...
```
- Starting dev instance: Fast..
```
 npm run dev
```
- Autoreload : Yes
- Package.json dependencies: Just three:
```json
  "dependencies": {
    "next": "^10.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
```
![stars](https://dev-to-uploads.s3.amazonaws.com/i/uoy7o2kb6suk3glymxeh.png)

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:

```jsx
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
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jpzsbirunxnf7kfd95e0.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/i/uoy7o2kb6suk3glymxeh.png)

**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](https://dev-to-uploads.s3.amazonaws.com/i/ygsf9q2xf0pu2brh77b2.png)

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. 

```jsx
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. 

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

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

![stars](https://dev-to-uploads.s3.amazonaws.com/i/uoy7o2kb6suk3glymxeh.png)

>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](https://dev-to-uploads.s3.amazonaws.com/i/uoy7o2kb6suk3glymxeh.png)

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


JWP2021 Next.js