Building First App in Next.js

Creating an App in Next.js

We can use the create-next-app command or manually create a new Next.js application. Using create-next-app is more accessible as all we need to do is enter npm create-next-app <app-name> into our command prompt.

Alternatively, we can open your package.json file and enter the following scripts:

"scripts": {
  "dev": "next dev",
  "start": "next start",
  "build": "next build"
}

 

Writing the script explicitly allows us to start our new application in different modes:

• dev : Application starts in development mode.
• start:  Application starts in production mode.
• build:  builds your Next.js application for production. This will build the basic Next.js application template we saw before, regardless of the technique you use.

If we run this app using next dev, we'll see the default Next.js page on http://localhost:3000.

Folder Structure Next.js

To avoid a crowded project file, Next.js uses a minimalist file system, which means the starting point only contains the bare minimum required to launch the program. This folder structure can be changed to fit your projects if you understand it.

Each Next.js project starts with three folders: 

1. pages
2. public
3. styles

Here’s an example of what  a new Next.js project will look like:

// other files and folders including,   package.json, next.config.js, .gitignore...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Pages

Your page files are stored in the pages folder. Every page file is a React component with an automatically generated unique route based on the file name. The Next.js page hello.js, for example, would be located under pages/hello.js.

Some pages, such as _app.js, have an underscore prefix in their name to indicate that they are bespoke components. Next.js uses these components  to interact with other components.

_app.js, for example, is used to begin each page but is not utilized as the webpage.

 

Public

This folder is for providing static files, which are files that don't change and can only be referred. This folder frequently contains graphics or icons used by the site, as well as internal data such as Google Site Verifications.

We have favicon.ico, a small icon for use on browser tabs, and vercel.svg, which displays the platform company's icon, in our public folder.

NOTE: The most popular hosting and serverless providers for Next are Vercel and Netlify. js

Styles

Our CSS style sheets, which control the appearance of all of our page elements, are stored in this folder. The globals.css file establishes a common style for all pages in the project.

You can also use module files with the suffix <componentName> to apply component-specific styling.module.css.

 

Navigation in Next.js App

The ways in which your users can browse through your Next.js website are referred to as navigation. The two basic approaches for defining site navigation are routes and links.

The built-in route definitions of each component make routes in Next.js approachable. Understanding the index, nested, and dynamic routes is critical for app routing optimization.

Index

Index files, such as index.js, are directed to the root of your application, not /index. Create numerous index files that serve as the landing page or starting point for different navigation pathways inside your site to take use of this.

- pages
  - index.js # found at `/`
  - users
    - index.js # found at `/users`
    - account.js # `/users/account`

 

The index.js page under simply pages, for example, is the site's homepage, which is reached if no other route is entered. The second index.js file under users is the user's path landing page, which can be accessed by typing siteName>/users.

Nested

Nested routes are only accessible through a shared parent route, such as /users/account. Nested routes are similar to nested files on our computer in that they require us to browse through all higher components in order to access the nested component.

Dynamic Routes

To allow for changeable behavior, we can include parameters in our routes. Square brackets are used to define dynamic pages. This feature enables us to pass data to a page in the same way that we would a function.

We might, for example, rewrite our user component to allow users to create their own accounts pages.

# ...
  - users
    - index.js
    - [account.js] # `/users/[accountName]`

 

Instead of starting at users, users can enter their account name in the URL and go straight to their account information page. To put it another way, if we type in the account name, /users/educative, I'll be taken to a dynamic page that populates with information specific to the account name entered.

Conditional statements in the account.js file will inform it what to do depending on which parameter is supplied.

if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }

Data Fetching in Next.js

Data fetching is the process of Next.js requesting data from a server in order to generate a page. User-friendly apps are created by selecting the appropriate pre-render methods and fetch routines.

The page can be generated using SSR, which has the server render the entire page instantly after receiving the request, or static generation, which caches a previous render of the page and delivers it immediately.

• SSR: For pages that are very interactive or change frequently and don't work with static generation.
• SG: The static render is better for text-only pages or pages that do not change because it will always fulfill the user's needs.

We can use one or the other fetching method or implement a hybrid system. The async data fetching functions in Next.js provide centralized fetching alternatives to the classic React technique. These are the functions:

• getStaticProps: used in conjunction with SG to retrieve page content from a database.

export async function getStaticProps() {
    // This endpoint is active
  const res = await fetch('https://sampleapis.com/fakebank/api/Accounts');
  const accounts = await res.json();
  return {
    props: {
      accounts: accounts.slice(0, 10),
    },
  };
}

 

• getStaticPaths:  used in conjunction with SG to extract page routes from external data

export async function getStaticPaths() {
  //A list of states is fetched
  const res = await fetch("https://sampleapis.com/the-states/api/the-states");
  const states = await res.json();
  // Create a path from the ids:  `/states/1`, `/states/2` ...
  const paths = states.map((state) => `/states/${state.id}`);
  // Paths are returned, fallback is necessary,false means that unrecognized pathways will result in a 404 page.
  return { paths, fallback: false };
}

 

• getServerSideProps - Used in conjunction with SSR to pull pre-rendered pages during the construction process.

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}
export default HomePage

Running a Simple Next.js App

Our index.js file has the following code:

function HomePage() {
   return <div>Welcome to Next.js!</div>
}
export default HomePage

Now, we will start the server by running the following command into the command prompt:

npm run dev

 

We will get the following output at localhost: 3000:

 

FAQs

1. What is the point of Next JS?
   Next.js is a React framework that adds new functionality including server-side rendering and static website generation. React is a JavaScript package that has usually been used to create web applications that are rendered using JavaScript in the client's browser.
    
2. Is Next.js better than React?
   Next.js has more capabilities and tools for working behind the scenes, whereas React. js has more resources for working on the front-end of your online or mobile application.
    
3. Is Next.js full stack?
   Because it is a full-stack framework (that is, it handles both the frontend and backend of your application) and supports a number of rendering methods—even mixing and matching those methods as needed—js is a popular choice for online application development. 

Key Takeaways

So, far we have learnt:

Next.js is a React front-end framework that provides extra pre-rendering features such as out-of-the-box server-side rendering and static generation to improve performance and user experience.

Since Next.js is a React based framework, we need to setup node in order to use Next.js.

For more interesting blogs, please visit our Coding Ninjas Blog website.

Recommended Readings:

NPX vs NPM

Thank you and happy reading!