Installation

Open the project folder using your preferred code editor and launch the terminal. You will need to install all the required dependencies by running npm install and then run npm run dev. Next.js will start a local server and provide you with a URL to view the app. Whenever you make changes, the page will automatically reload.

Starting now, you can begin customizing the template to your liking.

Fundamental concepts

Our Next.js templates are designed to fully adhere to the new routing model provided by the App Router (opens in a new tab) in Next.js 13. As a result, there will no longer be a pages/ directory. Instead, all pages will be contained within the new app/ directory.

Layout

Within the app/ directory, you will find a Root Layout (layout.js) that is shared across all pages in the application. This layout provides the user interface that is shared across all pages in your application.

Pages

In Next.js, each page (opens in a new tab) of the website is defined by a file called page.js. The route of the page is determined by the folder(s) that contain the page.tsx file. Each folder in the path represents a route segment.

For example, if the path of a page is app/products/[slug]/page.js, the URL of the page will be website.com/products/product.

It’s important to note that any folders in parentheses that define route groups will be omitted from the URL. This means that even if the path of a page is app/(default)/login/page.js, the URL will still be website.com/login.

Check out the Next.js documentation (opens in a new tab) to learn more.

Folder structure

We’ve partially described the folder structure in the previous paragraphs, so there are just two more folders in app/ to be mentioned – css/ and api/. The css/ folder includes all the styles of the app, while the api/ folder is used for creating custom API routes for your app.

In the root directory of every template you will also find:

• components/ that contains all the reusable components used across the app. You can modify or create new components in this folder to customize the appearance and functionality of your app.
• public/ is where you can keep all the static assets, like images, videos, and fonts that your app needs. This folder is accessible directly via a URL at runtime, so make sure to keep only the public assets in this folder and not include any confidential information.