Next.js Workshop Getting Started

N
andrewgbliss
3 months ago

This is the getting started guide in using Next.js

. . .

Getting Started

Next.js is a React Framework that is an all in one solution for creating, building, deploying a website. You can have static pages (Web page that don't change) and server side rendered components which change.

To get started we need to have nodejs installed and you can go to this article to get started:

https://www.levelupdev.training/article/andrewgbliss/beginners-introduction-to-java-script-development

Github Repo

https://github.com/LevelUpDevTraining/nextjs-workshop

Installing Next.js

We will be using an npx command:

npx create-next-app workshop

This will create a Next.js app called workshop. When it is finished build and creating all the folders and files we can start the Next.js development server.

Starting the Next.js Server

Now we can run this command to start the server:

npm run dev

This will start the server and output text similar to this:

started server on http://localhost:3000

Now if you go to http://localhost:3000 in your web browser you can see the auto generated Next.js Application.

index.js

If you open the pages/index.js file, you can see the main component of the app. This will be rendered when you go to http://localhost:3000. It is a React component that will be server side rendered and then sent as an html page.

about.js

If you can create an about.js page in the pages folder and paste this content:

export default function About() {
  return <>This is an about page</>;
}

Then you can go http://localhost:3000/about and you can see the new about page.

Conclusion

Next.js is a framework to server side render React components making it easy for development. In the next article we will lean about Next.js routing.

Links

https://nextjs.org

Getting Started With Next.js


N
andrewgbliss
3 months ago