nextjstemplates/startup-nextjs

Startup is free Next.js template for SaaS startups comes with all the essential pages, components, and sections you need to launch a complete business website.

startup-nextjs's Issues

Cannot resize the logo

It's not possible to resize the logo. When I change the "width" and "height" parameters, nothing happens. The logo stays the same size.

            <Image
              src="/images/logo/logo-2.svg"
              alt="logo"
              width={140}
              height={30}
              className="w-full dark:hidden"
            />
            <Image
              src="/images/logo/logo.svg"
              alt="logo"
              width={140}
              height={30}
              className="hidden w-full dark:block"
            />

Direct links to the sections of the home page don't work

If I try to open an exact section of the home page using the URL it doesn't work. The page always opens at the top. E.g.

http://localhost:3000/#features

Leads to the top of the home page.

However, if I try to navigate to it internally within the home page using the Link it works fine:

<Link
      href="/#features"
      className="inline-block rounded-sm bg-black px-8 py-4 text-base font-semibold text-white duration-300 ease-in-out hover:bg-black/90 dark:bg-white/10 dark:text-white dark:hover:bg-white/5"
>
Read More
</Link>

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

steps to reproduce:
npm i
npm run dev
visit https://localhost:300 and launch dev-console

Error:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14726:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14776:7)
    at updateHostComponent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22996:5)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24826:14)
    at HTMLUnknownElement.callCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4246:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4295:16)
    at invokeGuardedCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:4359:31)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32202:7)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31063:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31021:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29978:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
throwOnHydrationMismatch @ react-dom.development.js:14726
tryToClaimNextHydratableInstance @ react-dom.development.js:14776
updateHostComponent @ react-dom.development.js:23001
beginWork @ react-dom.development.js:24831
callCallback @ react-dom.development.js:4246
invokeGuardedCallbackDev @ react-dom.development.js:4295
invokeGuardedCallback @ react-dom.development.js:4359
beginWork$1 @ react-dom.development.js:32207
performUnitOfWork @ react-dom.development.js:31082
workLoopConcurrent @ react-dom.development.js:31068
renderRootConcurrent @ react-dom.development.js:31026
performConcurrentWorkOnRoot @ react-dom.development.js:29983
workLoop @ index.js:10
flushWork @ index.js:10
performWorkUntilDeadline @ index.js:10

System details:
node - 16.20.2
npm - 8.19.4
yarn -1.22.19
macOS - 10.13.6 (High Sierra)

How can I downgrade the NextJS version to 12.3.0 for this template

How can I downgrade the NextJS version from the current version 13.0 to 12.3.0 ?

Let me know.

Generating new icons

I am looking at the svg icons in components/Features/featuresData.tsx. I want to use different icons, but keep the style. How were these icons generated? The nextjs documentation references Material Design Icons, but the layers icon available there is definitely different from the one on the template.

Is there an easy way to take an icon from Material Design Icons or Google Symbols and Icons and convert it to the style used in this template? Thanks

TypeScript support?

Love the repo and idea. I'm curious if you folks have plans to change the JS to TypeScript?

Not asking you folks to implement TypeScript, just curious if there are plans to do so :)

Thanks!

I want to run the site

I want to run the site but I am getting various errors, please help me on Discord.

Installation Issue - No DB schema definition

I am following the startup template installation instructions and am at the database connection step. "npx prisma db push" fails because it can not find a prisma.schema file. Does this template include a starter DB schema, and if so, where do I find it?

Colouring and positioning is off

Comparing my deployment to the demo (https://startup.nextjstemplates.com/), the colouring is noticeably different, the buttons are not rounded, and the text positioning is different.

Compact mode menu doesn't disappear after the click

When the menu collapses to a "hamburger" icon in compact mode it stays on the screen when one opens it and clicks any of the menu items.

The issue reproduces only in a downloadable package and is not reproduced in an online live demo.

startup-nextjs-main.zip

error 404 page could not be found.

I have run the following commands:

npm run build
npm run start

> [email protected] start
> next start

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000

 ✓ Ready in 399ms

And I go to the:

http://localhost:3000/

It return 404 page could not be found.

OS: Mac
NodeJS version: v20.14.0

hard reload not working in this template

I was trying to refresh using ctrl + r and even though the page reloads it doesn't goes to the top of page. And that should be the default behaviour of any standard web pages.

Another observation, I cant route to the section with id in the single page. Looks there is something causing this issue, but unfortunately i am unable to figure out the reason.

<Link href="#feature"> feature</Link>
<section id="feature"> </section>

This doesn't work

Next export support?

[email protected] export
next build && next export

warn - You have enabled experimental feature (appDir) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - Thank you for testing appDir please leave your feedback at https://nextjs.link/app-feedback

info - Creating an optimized production build
info - Compiled successfully

./components/Video/index.tsx
61:9 Warning: Using <img> could result in slower LCP and higher bandwidth. Use <Image /> from next/image instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
info - Collecting page data
info - Generating static pages (11/11)
info - Finalizing page optimization

Route (app) Size First Load JS
┌ ○ / 0 B 0 B
├ ○ /about 184 B 89.7 kB
├ ○ /blog 181 B 89.7 kB
├ ○ /blog-details 171 B 87.6 kB
├ ○ /blog-sidebar 183 B 89.7 kB
├ ○ /contact 180 B 84.9 kB
├ ○ /error 180 B 84.9 kB
├ ○ /signin 180 B 84.9 kB
└ ○ /signup 180 B 84.9 kB

• First Load JS shared by all 82.7 kB
  ├ chunks/17-4e8fdc7dead168ed.js 80.4 kB
  ├ chunks/main-app-c7bdb52d251a0e10.js 216 B
  └ chunks/webpack-9c9cfc95929cb623.js 2.07 kB

Route (pages) Size First Load JS
─ ○ /404 179 B 81.2 kB

• First Load JS shared by all 81 kB
  ├ chunks/main-e9ff11a58bf7a0ec.js 78.7 kB
  ├ chunks/pages/_app-5841ab2cb3aa228d.js 192 B
  └ chunks/webpack-9c9cfc95929cb623.js 2.07 kB

○ (Static) automatically rendered as static HTML (uses no initial props)

warn - You have enabled experimental feature (appDir) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - Thank you for testing appDir please leave your feedback at https://nextjs.link/app-feedback

info - using build directory: /home/lord/code/next-landing/.next
info - Copying "static build" directory
info - No "exportPathMap" found in "/home/lord/code/next-landing/next.config.js". Generating map from "./pages"
info - Launching 7 workers
info - Copying "public" directory
info - Exporting (2/2)
PageNotFoundError: Cannot find module for page: /error
at Object.getPagePath (/home/lord/code/next-landing/node_modules/next/dist/server/require.js:77:15)
at /home/lord/code/next-landing/node_modules/next/dist/export/index.js:382:48
at Array.map ()
at /home/lord/code/next-landing/node_modules/next/dist/export/index.js:373:69
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Span.traceAsyncFn (/home/lord/code/next-landing/node_modules/next/dist/trace/trace.js:79:20) {
code: 'ENOENT'
}

When the project is executed with the "next build && next export" command, the "Cannot find module for page: /error" error is reported

{
"name": "startup-nextjs-template",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next/font": "13.1.6",
"eslint": "8.33.0",
"eslint-config-next": "13.1.6",
"next": "13.1.6",
"next-themes": "^0.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-modal-video": "^2.0.0"
},
"devDependencies": {
"@types/node": "^18.15.11",
"@types/react": "^18.0.34",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.2",
"tailwindcss": "^3.2.4",
"typescript": "^5.0.4"
}
}

$ next build && next export
warn - You have enabled experimental feature (appDir) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - Thank you for testing appDir please leave your feedback at https://nextjs.link/app-feedback

info - Creating an optimized production build
info - Compiled successfully
info - Linting and checking validity of types ..Pages directory cannot be found at /Users/taoxiaofeng/startup-nextjs/pages or /Users/taoxiaofeng/startup-nextjs/src/pages. If using a custom path, please configure with the no-html-link-for-pages rule in your eslint config file.

./components/Video/index.tsx
61:9 Warning: Using <img> could result in slower LCP and higher bandwidth. Use <Image /> from next/image instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info - Linting and checking validity of types
info - Collecting page data
info - Generating static pages (11/11)
info - Finalizing page optimization

Route (app) Size First Load JS
┌ ○ / 0 B 0 B
├ ○ /about 187 B 89.7 kB
├ ○ /blog 186 B 89.7 kB
├ ○ /blog-details 170 B 87.6 kB
├ ○ /blog-sidebar 187 B 89.7 kB
├ ○ /contact 181 B 85 kB
├ ○ /error 181 B 85 kB
├ ○ /signin 181 B 85 kB
└ ○ /signup 181 B 85 kB

• First Load JS shared by all 82.8 kB
  ├ chunks/17-4e8fdc7dead168ed.js 80.4 kB
  ├ chunks/main-app-ee6095fcf570d5e7.js 216 B
  └ chunks/webpack-7793c2692b6bb74a.js 2.13 kB

Route (pages) Size First Load JS
─ ○ /404 179 B 81.2 kB

• First Load JS shared by all 81.1 kB
  ├ chunks/main-e9ff11a58bf7a0ec.js 78.7 kB
  ├ chunks/pages/_app-5841ab2cb3aa228d.js 192 B
  └ chunks/webpack-7793c2692b6bb74a.js 2.13 kB

○ (Static) automatically rendered as static HTML (uses no initial props)

warn - You have enabled experimental feature (appDir) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info - Thank you for testing appDir please leave your feedback at https://nextjs.link/app-feedback

info - using build directory: /Users/taoxiaofeng/startup-nextjs/.next
info - Copying "static build" directory
info - No "exportPathMap" found in "/Users/taoxiaofeng/startup-nextjs/next.config.js". Generating map from "./pages"
info - Launching 7 workers
info - Copying "public" directory
info - Exporting (2/2)
PageNotFoundError: Cannot find module for page: /error
at Object.getPagePath (/Users/taoxiaofeng/startup-nextjs/node_modules/next/dist/server/require.js:77:15)
at /Users/taoxiaofeng/startup-nextjs/node_modules/next/dist/export/index.js:382:48
at Array.map ()
at /Users/taoxiaofeng/startup-nextjs/node_modules/next/dist/export/index.js:373:69
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Span.traceAsyncFn (/Users/taoxiaofeng/startup-nextjs/node_modules/next/dist/trace/trace.js:79:20) {
code: 'ENOENT'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Invalid DOM property `clip-path`. Did you mean `clipPath`?

This what I see on chrome dev console.

• npm i
• npm run dev
• visit https://localhost:300/ and launch dev-console

Since you guys keep closing issues without any sort of investigation I had to create a new issue.

hydration-error-info.js:26 Warning: Invalid DOM property `clip-path`. Did you mean `clipPath`?
    at g
    at svg
    at span
    at button
    at div
    at div
    at div
    at div
    at section
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:190:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:353:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:389:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:301:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:21:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:190:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:353:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:389:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:301:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:21:11)
    at f (webpack-internal:///(app-client)/./node_modules/next-themes/dist/index.module.js:8:597)
    at $ (webpack-internal:///(app-client)/./node_modules/next-themes/dist/index.module.js:8:348)
    at Providers (webpack-internal:///(app-client)/./app/providers.tsx:10:11)
    at body
    at html
    at RootLayout (webpack-internal:///(app-client)/./app/layout.tsx:19:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:20:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:64:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27078:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:21:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:126:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:143:11)

Hot Module Refresh Support

Hello,

Hot module refresh is one of my favorite features. I spent a while modifying the template to match my needs, but I can't seem to get hot module refresh working. Can you assist? Shouldn't Next.js ship with it by default? Maybe I just didn't enable it correctly.

Page anchor

I got a local instance running, works well so far.
Links to other sites working fine, though how can I implement Page anchors?
I saw something linke https://startup.nextjstemplates.com/blog#0 how can that be made workable rolling to an anchor (div name div id)?
Thanks

npm install not working.

stuck for npm install.
terminal o/p : reify:next: http fetch GET 200 https://registry.npmjs.org/next/-/next-14.1.0.tgz 294319ms (cache miss).

On Ubuntu 22.04
Node lts 20.12.0