Textiles - Next.js Template Documentation

Created: August 04, 2024
Last Updated: August 26, 2025
By: Ripon Hossain Shuvo
Support: rhshuvo44@gmail.com

Thank You!

Thank you for purchasing Textiles We've worked hard to create a template that is not only visually stunning but also robust, scalable, and easy to customize.

This documentation is designed to help you get up and running as quickly as possible. It covers everything from initial setup to full customization and deployment. If you have any questions that are not covered in this document, please feel free to reach out to us via our support channel.

We would be very grateful if you could rate our template on ThemeForest. Your feedback is important and helps us improve our products.

1. Getting Started

This section will guide you through the initial setup of the template.

Prerequisites

Before you begin, make sure you have the following software installed on your machine:

Node.js: Version 18.17.0 or later. You can download it from nodejs.org.
Package Manager: npm, yarn, or pnpm. This documentation will use npm in its examples, but you can use your preferred package manager.

Package Contents

When you unzip the download package from ThemeForest, you'll find the following:

template/: The main folder containing all the Next.js source code.
documentation/: This documentation file (usually in HTML or PDF format).
license/: The license files.

Installation

Follow these steps to get your project running locally:

Navigate to the template/ folder in your terminal or command prompt.
```
cd path/to/your/unzipped/package/template
```
Install the necessary dependencies. This will download all the required libraries for the project to run.
```
npm install
```
(or yarn install or pnpm install)

Running the Development Server

Once the installation is complete, you can start the local development server:

npm run dev

This command will start the application in development mode. You can now view it in your browser by navigating to:

http://localhost:3000

The application will automatically reload if you make any changes to the source files.

2. Folder Structure

Understanding the folder structure will help you locate and modify files efficiently. This template uses the Next.js App Router.

[Your Template Name]/
├── .next/           # Next.js build output (do not edit)
├── .vscode/         # VSCode settings (optional)
├── node_modules/    # Project dependencies (do not edit)
├── public/          # Static assets (images, fonts, favicon)
│   ├── images/
│   ├── logo.svg
│   └── favicon.ico
├── src/
│   ├── app/         # Main application routes and pages
│   │   ├── (pages)/   # Grouped routes (e.g., about, contact)
│   │   │   ├── about/
│   │   │   │   └── page.tsx
│   │   │   └── contact/
│   │   │       └── page.tsx
│   │   ├── api/       # API routes (optional)
│   │   ├── globals.css # Global styles
│   │   ├── layout.tsx  # Root layout of the application
│   │   └── page.tsx    # Homepage (route: /)
│   ├── components/  # Reusable React components
│   │   ├── ui/        # Low-level UI components (Button, Card, etc.)
│   │   ├── layout/    # Layout components (Header, Footer, Sidebar)
│   │   └── sections/  # Page-specific sections (Hero, Features, etc.)
│   └── lib/         # Helper functions, utility code
├── .env.local       # Local environment variables (create this file)
├── .env.example     # Example environment variables
├── .eslintrc.json   # ESLint configuration
├── .gitignore       # Files to be ignored by Git
├── next.config.mjs  # Next.js configuration
├── package.json     # Project dependencies and scripts
├── postcss.config.js # PostCSS configuration (for Tailwind CSS)
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json    # TypeScript configuration

3. Customization

This section explains how to customize the template to fit your brand and content.

Changing the Logo & Favicon

Logo: Replace the logo.svg (or logo.png) file in the public/ directory with your own logo. To adjust the logo size, find the <Image> component in src/components/layout/Header.tsx and modify its width and height props.
Favicon: Replace the favicon.ico file in the public/ directory with your own. You can use an online generator to create a .ico file.

Theme Configuration (Colors, Fonts, etc.)

This template uses Tailwind CSS for styling. The main configuration file is tailwind.config.ts.

Colors: To change the primary, secondary, and other colors, modify the colors object in tailwind.config.ts.

// tailwind.config.ts
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: '#YOUR_PRIMARY_COLOR', // e.g., '#5A67D8'
        secondary: '#YOUR_SECONDARY_COLOR', // e.g., '#F56565'
        // ... add more custom colors
      },
    },
  },
  // ...
}

Fonts: The template uses Google Fonts, configured in src/app/layout.tsx. To change the font:
1. Go to Google Fonts, choose your desired font, and get the import code.
2. In src/app/layout.tsx, replace the existing font import and instantiation with your new font.
3. (Optional) Add the font family to your tailwind.config.ts for easy use in your classes.

Editing Page Content

All page content is located within the src/app/ directory.

The Homepage content can be edited in src/app/page.tsx.
Other pages, like "About" or "Contact", are in their respective folders (e.g., src/app/about/page.tsx).

Content is written directly in JSX. Simply open the relevant file and edit the text and HTML-like tags.

Updating Navigation Links

Navigation links for the header and footer are typically managed within their respective components:

Header: Open src/components/layout/Header.tsx and find the array or list of navigation items. Modify the links and labels as needed.
Footer: Open src/components/layout/Footer.tsx and do the same.

Working with Images

Place all your static images inside the public/images/ directory.

Use the Next.js <Image> component for optimized, responsive images. Import it from next/image.

import Image from 'next/image';

<Image
  src="/images/your-image.jpg" // Path relative to the `public` folder
  alt="A descriptive alt text"
  width={500}
  height={300}
  priority // Add for above-the-fold images
/>

4. Key Features & Advanced Usage

Environment Variables

For sensitive information like API keys, use environment variables.

Create a file named .env.local in the root of your project.
Copy the contents of .env.example into .env.local.

Fill in your own values.

# .env.local
NEXT_PUBLIC_API_URL="https://api.example.com"
SOME_SECRET_KEY="your_secret_key_here"

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser.
Other variables are only available on the server-side.

Data Fetching

This template fetches data using async Server Components, the recommended approach in the Next.js App Router. You can see examples in src/app/blog/[slug]/page.tsx or other dynamic pages. This allows for fast, server-rendered pages that are great for SEO.

Working with Components

The template is built with a component-based architecture. Reusable components are located in src/components/.

ui/: Contains general-purpose UI elements like <Button>, <Card>, <Input>.
layout/: Contains structural components like <Header> and <Footer>.
sections/: Contains larger, page-specific sections like <HeroSection> or <PricingSection>.

Feel free to reuse these components across your pages or create new ones.

Third-Party Libraries

This template uses the following key libraries:

React (docs)
Next.js (docs)
Tailwind CSS (docs)
Framer Motion (for animations) (docs)
Lucide React (for icons) (docs)

Please refer to their official documentation for more in-depth information.

5. Deployment

You can deploy your Next.js application to any hosting provider that supports Node.js.

Recommended: Deploying to Vercel

Vercel is the creator of Next.js and provides a seamless, zero-configuration deployment experience.

Push your code to a Git repository (e.g., GitHub, GitLab, Bitbucket).
Sign up for a free account at vercel.com.
Click "Add New..." -> "Project".
Import your Git repository.
Vercel will automatically detect that it's a Next.js project and configure the build settings.
Add your environment variables (from your .env.local file) in the "Environment Variables" section of the project settings on Vercel.
Click Deploy. Your site will be live in minutes!

Other Options (Netlify, etc.)

You can also deploy to other services like Netlify, AWS Amplify, or your own server.

For hosting platforms like Netlify: The process is similar to Vercel. Import your Git repo, and the platform will likely auto-detect the settings.
For a traditional server:
1. Run the build command: npm run build
2. This creates an optimized production build in the .next folder.
3. Run the start command: npm start
4. You will need a process manager like pm2 to keep the server running.

6. Changelog

Version 1.0.0 - August 04, 2025

Initial release.

7. Support

We are committed to providing excellent support. However, please note what is and isn't covered.

Support Covers:

Help with features included in the template.
Bugs or issues found in the original template files.
Guidance on the included features.

Support Does Not Cover:

Customization or new feature implementation.
Issues arising from modifications you have made to the code.
Server configuration or issues with third-party plugins and libraries.

For support, please contact us through our profile page on ThemeForest or email us at rhshuvo44@gmail.com. We generally respond within 24-48 hours on business days.

Thank you again for your purchase!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Textiles - Next.js Template Documentation

Thank You!

Table of Contents

1. Getting Started

Prerequisites

Package Contents

Installation

Running the Development Server

2. Folder Structure

3. Customization

Changing the Logo & Favicon

Theme Configuration (Colors, Fonts, etc.)

Editing Page Content

Updating Navigation Links

Working with Images

4. Key Features & Advanced Usage

Environment Variables

Data Fetching

Working with Components

Third-Party Libraries

5. Deployment

Recommended: Deploying to Vercel

Other Options (Netlify, etc.)

6. Changelog

7. Support

About

Uh oh!

Releases

Packages

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 135 Commits
.vscode		.vscode
docs		docs
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
eslint.config.mts		eslint.config.mts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

rhshuvo44/textiles

Folders and files

Latest commit

History

Repository files navigation

Textiles - Next.js Template Documentation

Thank You!

Table of Contents

1. Getting Started

Prerequisites

Package Contents

Installation

Running the Development Server

2. Folder Structure

3. Customization

Changing the Logo & Favicon

Theme Configuration (Colors, Fonts, etc.)

Editing Page Content

Updating Navigation Links

Working with Images

4. Key Features & Advanced Usage

Environment Variables

Data Fetching

Working with Components

Third-Party Libraries

5. Deployment

Recommended: Deploying to Vercel

Other Options (Netlify, etc.)

6. Changelog

7. Support

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages