Trying Next.js

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

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

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

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.

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

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

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.

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:

And there you have it, you can navigate between pages

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
2. Integration with any library not related to Next (maybe victory? I have been wanting to try it)
3. Integration with ESLint
4. TypeScript integration
5. Testing with Cypress
6. Testing with React Testing Library

If you have any comments please leave them below.
Cheers