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.
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.
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.
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.
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.
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.
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:
(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.
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:
- Appy (for blog articles)
- DevSpace (for blog articles)
- Docs (for documentation pages)
- Fintech (for help articles)
- Open PRO (for blog articles and help pages)
- Podcast (for audio pages with content)
- Simple (for blog articles)
- Tidy (for blog articles)
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.
Contentlayer for MDX processing
We use Contentlayer as the MDX processor for our templates, for several reasons. Firstly, it’s easy to use and provides a great developer experience. Secondly, it’s incredibly fast, ensuring that your website loads quickly and efficiently.
You’ll find a contentlayer.config.js file in the root directory of each template. This file allows you to define the schema for a particular document type, giving you control over how your content is structured and displayed.
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.
Finally, it’s worth mentioning that some of our templates come with MDX plugins. For instance, our Docs and DevSpace templates integrate with Rehype Pretty Code, a syntax highlighting plugin that produces visually stunning code blocks.
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.
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.
You can deploy your app on Vercel, or use any other services recommended in the official documentation.