🚀 Free NextJS Landing Page Template written in Tailwind CSS 3 and TypeScript ⚡️ Made with developer experience first: Next.js 14 + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS
Home Page: https://creativedesignsguru.com
License: MIT License
Hi There,
I tried to deploy this template to netlify (clicking on the Deploy to Netlify button in the README), but got this error during the deployment.
Could you please give some insights on how to resolve this?
Plugin "@netlify/plugin-nextjs" failed
Error: The directory "out" does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory.
Your publish directory is set to "out", but in most cases it should be ".next".
If you are using "next export" then you should set the environment variable NETLIFY_NEXT_PLUGIN_SKIP to "true".
In "onBuild" event in "@netlify/plugin-nextjs" from Netlify app at checkNextSiteHasBuilt (/.netlify/plugins/node_modules/@netlify/plugin-nextjs/lib/helpers/verification.js:68:16) at onBuild (/.netlify/plugins/node_modules/@netlify/plugin-nextjs/lib/index.js:37:50)
Logs:
9:32:37 PM: ──────────────────────────────────────────────────────────────── 9:32:37 PM: Plugin "@netlify/plugin-nextjs" failed 9:32:37 PM: ──────────────────────────────────────────────────────────────── 9:32:37 PM: 9:32:37 PM: Error message 9:32:37 PM: Error: The directory "out" does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory. 9:32:37 PM: Your publish directory is set to "out", but in most cases it should be ".next". 9:32:37 PM: If you are using "next export" then you should set the environment variable NETLIFY_NEXT_PLUGIN_SKIP to "true". 9:32:37 PM: 9:32:37 PM: Plugin details 9:32:37 PM: Package: @netlify/plugin-nextjs 9:32:37 PM: Version: 4.2.4 9:32:37 PM: Repository: git+https://github.com/netlify/netlify-plugin-nextjs.git 9:32:37 PM: npm link: https://www.npmjs.com/package/@netlify/plugin-nextjs 9:32:37 PM: Report issues: https://github.com/netlify/netlify-plugin-nextjs/issues 9:32:37 PM: 9:32:37 PM: Error location 9:32:37 PM: In "onBuild" event in "@netlify/plugin-nextjs" from Netlify app 9:32:37 PM: at checkNextSiteHasBuilt (/.netlify/plugins/node_modules/@netlify/plugin-nextjs/lib/helpers/verification.js:68:16) 9:32:37 PM: at onBuild (/.netlify/plugins/node_modules/@netlify/plugin-nextjs/lib/index.js:37:50) 9:32:37 PM: 9:32:37 PM: Resolved config 9:32:37 PM: build: 9:32:37 PM: command: npm run build-prod 9:32:37 PM: commandOrigin: config 9:32:37 PM: environment: 9:32:37 PM: - NEXT_PRIVATE_TARGET 9:32:37 PM: publish: /opt/build/repo/out 9:32:37 PM: publishOrigin: config 9:32:37 PM: plugins: 9:32:37 PM: - inputs: {} 9:32:37 PM: origin: ui 9:32:37 PM: package: '@netlify/plugin-nextjs'
I have a method that calls backend node js API
export async function getServerSideProps(context:GetServerSidePropsContext){
const reqUrl = context.req.url;
const splitUrl = reqUrl?.toString().split('?').pop()?.split('&');
if(!splitUrl) return null;
const searchText = splitUrl[0]?.split('=')[1];
const suburb = splitUrl[1]?.split('=')[1];
if(searchText && suburb){
const _dataService = new ServiceProviderDataService();
const response = await _dataService.searchAdvertisements(searchText, suburb);
const searchTitle = `We found ${response.length} search results for ${searchText} in ${suburb} ..`;
return {
props: {
data: response,
searchTitle:searchTitle,
},
};
}
return null;
}
const SearchResultsPage = (data:ISearchResult[],searchTitle:string) => (
<Main>
<Head>
<meta
name="description"
content={`Elevate your hairstyling experience with Mobile Hairdressers,
the ultimate destination for connecting clients and skilled mobile hairdressers.
Explore our About Us page to learn how we seamlessly bridge the gap between clients and talented stylists,
bringing the salon experience to your doorstep.
Discover the convenience, expertise, and personalized service that define our mobile hairdressing platform`}
/>
</Head>
<SearchResults searchTitle={searchTitle} searchResults={data} />
</Main>
);
The above code works in local (npm run build, npm run start, npm run dev). When I upload to my ubuntu server, the getserversideprops waits a long time and returns a ECONNN TIMEOUT. I can confirm the API is returning data (as I previously said, this is all working well in localhost)
Sitemaps are nice things. Just simple question Do we have any automated sitemap generation? IF yes then how can we use it.
I want to set up i18n for this landingpage, but this requires next build and a node.js server -> I set the build command to next build but it doesn't work, so what should I do?
I would like to use the script(https://nextjs.org/docs/basic-features/script) that was released with version 11. Hence I want to switch to that
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.