Trying Next.js
Tags: javascript, react, webdev
Published: 2023-01-26 20:58:54

Have you ever have to do a POC or something like it, where you need to get an app running as easy and pretty as possible?
Lately talking to different friends and colleagues I got many comments about Next.js, so I decided to give it a try and see how fast I could get something running.
According to their web site 

> Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds

More in detail 

> Next.js aims to have best-in-class developer experience and many built-in features, such as:

- An intuitive page-based routing system (with support for dynamic routes)
- Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
- Automatic code splitting for faster page loads
- Client-side routing with optimized prefetching
- Built-in CSS and Sass support, and support for any CSS-in-JS library
- Development environment with Fast Refresh support
- API routes to build API endpoints with Serverless Functions
- Fully extendable

So let's go ahead and do the first step according to the instructions I found in their site, lets input in the terminal this command

`npx create-next-app@latest nextjs-try1 --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
`

This command uses the [template example](https://github.com/vercel/next-learn/tree/master/basics/learn-starter) and my project is going to be _nextjs-try1_ (I know not the best name, but I'm not sure yet what I want to build)

First thing it told me that I need to install a package

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl7q9exe1p1oezw9qhxs.png)

I said yes and then in seconds I got my project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm5jx41bt0bg9z070ym3.png)

If I see the folder that was created, this is what I get.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bevthn1pfqncjenoyts.png)

So it looks like a I have where to put my pages, styles and public resources, so for now I'm just going to follow the instructions and try to run the project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l88qc3lew3mlhc613iw.png)

Looks like I'm going to my localhost port 3000 and there it is my first page in Next.js.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tq4crguctgj1a53tjlb.png)

So far so good, I see why people have told me I could get something running fast with this.

Even if I'm building something small usually at least I want to know that I can navigate between pages.

> In Next.js, a page is a React Component exported from a file in the pages directory.

So I'm going to create a page called `hello-world.js`

![hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pivnazogrz0htifd0p90.png)

And I'm going to check if I can see my page with this url http://localhost:3000/hello-world and this is what I get.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a0q7w3t4nd89i8bkk5x.png)

> In Next.js, you can use the Link Component next/link to link between pages in your application.

So I'm going to go to my index.js file and change it like so:

![say hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1sehtb4fm34b83d875b.png)

And there you have it, you can navigate between pages

![new index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yu9d4zvtttkx0b3u09um.png)

For now I'm going to leave it here, but I did look at the documentation and here are some things I want to try in some next posts, I'll update to links once I have the posts:

1. [Deployment](https://dev.to/celest67/deployment-with-nextjs-41j7)
2. Integration with any library not related to Next (maybe victory? I have been wanting to try it)
3. [Integration with ESLint](https://dev.to/celest67/nextjs-with-eslint-3gl5) 
4. [TypeScript integration](https://dev.to/celest67/nextjs-and-typescript-55ha)
5. [Testing with Cypress](https://dev.to/celest67/nextjs-with-cypress-3a5b)
6. [Testing with React Testing Library](https://dev.to/celest67/nextjs-with-jest-react-testing-library-3cc6)

If you have any comments please leave them below.
Cheers