Designly

Designly is a sleek and modern design agency template built with Next.js and Tailwind CSS. Designed for creative professionals, it offers a clean, responsive layout and effortless customization, making it the perfect foundation for showcasing your agency’s work and attracting new clients with confidence.

Learn how to use the template by following the steps below.

Getting Started

First, install the dependencies:

npm install

Second, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Editing Pages

The template comes with 3 pages the Home, Case Studies, and Case Study Details pages.

1. To edit the Home page, modify app/page.tsx.
2. To edit the Case Studies page, modify app/case-studies/page.tsx.
3. To edit the Case Study Details page, modify app/case-studies/[slug]/page.tsx.

Editing Components

The template comes with a set of components that you can use to build your pages, all the components are located in the components directory and you can modify them to suit your needs.

There is also a app/components directory this is different from the global components directory, the app/components directory contains components that are specific to the landing page (app/page.tsx).

SEO

The template comes with built-in SEO support, you can modify the SEO settings by editing the lib/utils.ts file and changing the default values for the generateMetadata() function.

Each page uses the generateMetadata() function to generate the necessary metadata for the page.

Below are the other SEO settings and files you can modify:

1. app/favicon.ico - The favicon for the website, you can replace it with your own logo.
2. app/sitemap.ts - The sitemap for the website, you can modify it to include or remove pages.
3. app/robots.txt - The file used for search engine crawlers, you can modify which areas of the site crawlers are allowed or disallowed to access.
4. app/manifest.ts - The file that tells the browser how your Progressive Web App (PWA) should behave when installed on the user's desktop or mobile device.
5. public/product-demo.png - The image used for the Open Graph and Twitter Card tags, you can replace it with your own image.

Deployment

The easiest way to deploy a Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Before deploying your app to production, you need to rename the .env.local file to .env and add your domain url as value for the NEXT_PUBLIC_PROD_URL on that file.

FAQ