✨ Get all templates and new upcoming releases for just $89. Limited time offer ✨
Tailwind CSS

Next.js Templates

This technical documentation provides a comprehensive guide to our Next.js templates built with Tailwind CSS. We’ll walk you through the process of installing and customizing our templates, regardless of your level of experience with Next.js and Tailwind CSS.

All of our templates have been converted from pure React apps to Next.js apps as of April 2023. The reason behind this conversion is that we wanted to provide a product that is much closer to a production-ready app, and that can leverage server-side rendering (SSR) to improve performance and SEO.

Benefits of Next.js

Next.js will help us achieve a number of benefits, including faster page load times, better SEO, and easier deployment. We believe this will be a positive move for our users, who will continue to receive high-quality templates built using the latest web technologies.

The folder structure
Measuring the Performance of Next.js Cube Template with PageSpeed

Furthermore, we have also made the decision to use TypeScript in our Next.js templates. This choice was made to enhance the development experience, promote code consistency and maintainability, and ultimately create a more robust and reliable product for our users.

Technical notes

Our templates use Next.js 13 and have been developed with the App Router (app) and React Server Components.

Quickstart

To begin using our Next.js templates, you should first navigate to the main folder of the template you want to use. Once you have located the file that includes -next in its name, simply unzip the file and you can immediately start customizing your Next.js app.

Download and unzip the files

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

Install the dependencies and run a development server

Starting now, you can begin customizing the template to your liking. Keep in mind that any changes made to class names will trigger CSS regeneration.

Working on the website content (the video also shows how to globally switch Open PRO’s purple accent color to blue)

Fundamental concepts

Our Next.js templates are designed to fully adhere to the new routing model provided by the App Router 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.

Layouts

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

The Root Layout file

Route Groups and Nested Layouts

In some of our templates, you may notice that certain folders are enclosed in parentheses. These folders contain pages that are related to each other. For example, in our Cube template, we have two groups of pages:

Routed Groups are enclosed in parentheses
  • (auth) This group includes all authentication pages, such as Sign In, Sign Up, and Reset Password
  • (default) This group contains all other pages.

The reason for dividing pages into these two groups is that they utilize different layouts. In fact, within the (auth) and (default) folders, you will find two additional layout.tsx files, which define the layout for each respective group. These are known as nested layouts and ensure that each group of pages has a consistent UI.

Pages

In Next.js, each page of the website is defined by a file called page.tsx. 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/dashboard/settings/page.tsx, the URL of the page will be website.com/dashboard/settings.

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)dashboard/settings/page.tsx, the URL will still be website.com/dashboard/settings.

Check out the Next.js documentation 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.

The folder structure

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.

Use of Markdown and MDX in Next.js templates

As you may know, Next.js allows you to use the Markdown language for creating dynamic content that can be easily rendered on the client-side.

Markdown is ideal for creating simple blogs or documentation sites, as it allows you to separate content from the structure. Yes, you won’t need to fetch data from a database or API!

Our templates are designed to be flexible and customizable, and some of them are particularly well-suited for use with MDX. These templates are:

In the root directory of each of these templates, you’ll find a content/ folder that contains all of the MDX files. Each file corresponds to an article or page, and the file name corresponds to the slug for that article or page. For example, if you have an MDX file called getting-started.mdx, it would be accessible at website.com/docs/getting-started or a similar URL.

Managing MDX content

We use the @next/mdx package and Rehype Pretty Code, a syntax highlighting plugin that produces visually stunning code blocks.

Additionally, you may want to take a look at the main MDX file in components/mdx/, which imports any other components that can be used in your MDX files and renders the content on your pages.

One other feature worth noting is that we’ve integrated the Tailwind CSS Typography plugin into our Next.js template. This means that you can focus on content, without having to worry about how your typography will look.

Data fetching examples

To ensure optimal performance and scalability, it is important to carefully consider the technology used for each specific use case. While MDX is a powerful tool for creating dynamic content, there are scenarios where it may not be the most suitable option.

For instance, in the case of templates like Community and JobBoard, where user-generated content is a core feature, it is advisable to use a database or an API for data storage and retrieval. To demonstrate this approach, we have implemented the new data fetching model being developed by the React team.

To showcase this functionality, we have created some JSON files that contain the dummy data retrieved from our templates. For demo purposes, we have included an async function in the file lib/getAllPosts.tsx that utilizes the Web API fetch() method to retrieve data.

Data fetching example in Community

Building and deploying your Next.js app

Once you have made the necessary changes, you can compile and minify your code for production by running npm run build. To test the production-ready version of your app locally, you can run npm run start, this will launch a local server that allows you to preview your app in a production environment.

Build and preview the Next.js app

You can deploy your app on Vercel, or use any other services recommended in the official documentation.

Last updated on July 9, 2024