Qasim's Blog

Creating A Nextjs Application

Beginner tutorial

Qasim Amin's photo
Qasim Amin
·

3 min read

Creating A Nextjs Application

Photo by Kelly Sikkema on Unsplash

What Is Nextjs?

Nextjs is an open-source framework that works with React giving you building blocks to create fast web applications. The building blocks of a Web Applications include:

  • User interface - the interactions between your users and the application

  • Data Fetching - where your data is stored and controlled

  • Routing - navigation between pages in your application

  • Integrations - the use of third-party services(auth, payment)

  • Performance - optimization of your application for users

  • Infrastructure -where you run, deploy and store your application(Serverless, CDN)

Your First Next App - create-next-app

Installation - Nodejs

Before we start up your Nextjs app. If not done already, you are going to have to install Nodejs. By doing so, just direct yourself to the Nodejs installation website and you are going to have to install the LTS version.(At this time it is 18.16.1)

Creating Your Nextjs App

Now that you have completed the installation, we can move on to creating your Nextjs app. The first thing that you are going to want to do is open up a terminal or any terminal that is built into your computer(eg. Windows Powershell, Mac Termial, etc.).

The next thing that we are going to want to do is direct your prompt or terminal to whatever folder you want to create your application in simply by using cd and then your folder path.

Once you do that, you are going to put in, npx create-next-app@latest . If you haven't updated your node in a while it will ask you to install some packages and just press yes. After doing that, it will ask you some questions about your project name, and different things you might want to add.

In this app, you are going to enable:

  • Yes to TypeScript

  • No to EsLint

  • Yes to TailWind Css

  • Yes to `src/` directory

  • Yes to App Router

  • No to import alias

After doing so, the process should be finished and then you can redirect to your new Next app and type in code . to open it up in VisualStudioCode. Once your code has loaded, the layout should look similar to identical to mine:

Before, we look at any of the code. Let's run the app simply by opening up the terminal inside of visualstudiocode or in your own terminal and typing this command npm run dev to start up your application.

Once you have loaded up your application, you should be greeted with a page similar to this:

That's how to setup your first Nextjs app. But if you want to take it further, we can play around with it.

Writing Code - Hello World!

The first thing that we are going to do is get rid of all of the code inside of Page.tsx and Global.css

  • Page.tsx:
export default function Home() {
  return (
    <main className="">
      HelloWorld
    </main>
  )
}
  • Global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Now, all you should have on your app screen is a Hello World text on the top of the screen.

Conclusion

In conclusion, you should have learnt how to create a Nextjs app and write your first code in Nextjs. As a result, you should be able to apply your react skills to create a faster website in no time.

Next.jsReactBeginner Developershow-to