I have a nextjs project. At first it was even version 8. Later I raised it to 10. Now I want to raise it to the last one, but I ran into a problem, because now I need to store static files in the public folder. I have always had a static folder.
moving the static folder inside public doesn't work, neither does just renaming it and changing the url.
What can I be missing?
And is this a prerequisite for switching to version 12? What does it affect, besides the simplified address? performance?
Related
I have a bunch of images in a hidden gallery, only shown when a user clicks on a certain button.
On the development server, everything is fine, no errors or issues, but when I deploy my website and open the gallery the images don't show and throw a 404 error in the console (I included the required props).
When I replace the <Image/> component with <img>, everything is fine on the development server and live. Can anyone please help? I searched a lot and I didn't find anything like this issue.
My solution:
I had the same issue and solved it by renaming the image file names.
How the issue arose:
I had renamed the images, only changing uppercase to lowercase letters. This resulted in the files being wrongly named in my github repository. After a rename with new characters, the files were correctly updated on github.
Image Optimization using Next.js' default loader is not compatible with next export.
Possible solutions:
Use next start, which starts the Image Optimization API.
Use Vercel to deploy, which supports Image Optimization.
Configure a third-party loader in next.config.js.
That means: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available
To solve this problem. I just used next-optimized-images for static image and next/image for images from the cloud.
Kindly read this article for more understanding: https://dev.to/jameswallis/next-image-and-next-optimized-images-a-brief-comparison-4c4i
Create a folder on root call it 'static' which is bassically /static/imagename.png
Set the source to the image like so;
<img src="/static/imagename.png" />
This should load the static image in file both in dev environment and build file.
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I'm using meteor to build an app. I had a public folder containing javascript and html files for "tinymce" package. later i didn't use the package so i deleted the folder. Yet when I run my app, the browser shows an error in one of the files in the public folder - which i deleted. Is there something that I did wrong?
This is more than likely due to caching. I've run into similar problems in the past (with images not updating). Only solution I've come by was stopping the meteor process (control + c), purging the browser cache, restarting terminal and my browser, and re-running Meteor.
The problem was due to two parts. The first was caching, and the second was due to a script tag referring to the file - which I forgot to remove - in the head of the layout.
Within my meteor app I've created a private directory.
With meteor v. <0.9 the files in that directory have been available in '.meteor/local/build/programs/server/assets/app'
However now, using Meteor 0.9.2, the files are not there and I also can't access them via 'Assets.'
Does anyone have an idea what could be the problem?
I found the solution...whenever there is no JavaScript file present in the root folder of the meteor project, meteor somehow doesn't make the private files accessible (all my code is inside subfolders and packages). I solved the issue by adding an empty main.js file to the root folder, and voilà...the files can be accessed. I tried this across several projects and that really seems to be the issue. Very weird behavior indeed, since it doesn't even give me an error message.
I am taking a JSON file from the private directory, parsing the data and then inserting it into a collection on meteor startup. The JSON file is called categories.json with the file structure being /private/categories.json . The parsing and inserting code is below:
var data = JSON.parse(Assets.getText('categories.json'));
for (var i in data) {
Categories.insert({name:data[i].name});
}
As far as I can tell (because frankly documentation on System.Web.Optimization is very sparse), the way bundling works in ASP.NET is that you register a set of files (Javascript or CSS, corresponding with ScriptBundle and StyleBundle), and associate them with a virtual path; for example, ~/bundles/jqueryui for all the jQuery UI scripts. Later, ASP.NET can minify these files when you're running in non-debug mode, and the minified version will be made available at the virtual path you specified for the bundle.
The default bundle setup registers some script bundles with ~/bundles/... as the virtual path, and some CSS with ~/Content/css as the virtual path. My question is, isn't this inconsistent? Wouldn't it make more sense to have something like ~/bundles/js/... and ~/bundles/css/...? In fact, the ~/Content directory actually exists as a real directory, so there's even the chance of a name collision. I'd have thought you'd want your virtual bundle paths to be directories that don't exist by default, and are not meant to be created on the actual filesystem. Is there some reason why ~/Content/css is used for the CSS bundle virtual paths that I'm not understanding?
Great question, and the short story is that in general it doesn't matter at all. However, some script files and CSS depend on their physical location on disk because they use relative paths to reference other content. For example, of you look at the default jQuery UI bundle in new ASP.NET 4.5 project you see it has a rather long path. That's because jQuery's CSS has relative references to some image files. To get those to resolve correctly the paths matter or else things like ".." will not go up to the right parent directory.