I want to create a dynamic route structure for my next.js project, so the main directory would be countries and there will be many other countries under that directory.
www.mysite.com/countries
www.mysite.com/countries/united-states
www.mysite.com/countries/france
www.mysite.com/countries/united-kingdom
....
In my pages folder, I create a folder called countries and created a file [...slug].js. I have to create a file index.js inside the countries folder for www.mysite.com/countries to be accessible.
The issue is that index.js and [...slug].js have the same code, and I want to have only 1 file to maintain. How can I configure nextjs to use [...slug].js for www.mysite.com/countries and any sub pages under it?
You can simply change [...slug].js to [[...slug]].js to catch all routes starting with countries. It is treated as optional URL parameters in NextJs.
Official NextJs documentation also said that:
Catch all routes can be made optional by including the parameter in double brackets
Related
With this version, are you meant to create a Components/ folder inside the app folder? Or can I add new components anywhere in the file structure?
I currently have a components/ folder nested inside the app/ which seems to work fine. But I'm not sure if this can cause issues or if there is a better approach.
Can each "page" get it's own components/ folder?
In NextJS anything you keep inside the pages folder is considered a page or subpage, lets's say you have created the components folder inside one of the pages folders like below. Then you can access the components inside this folder as pages, so you can access this component with the below URL.
https://baseUrl/admin/components/componentName
So in NextJs, everything we put inside the pages folder is considered an individual page. If you want a separate space/folder for components you can create feature-level components outside the page folder like below.
Now components added in this feature folder are not accessible as a page and you can reuse these components as you want.
I hope this answered your question. Happy coding!
I have a custom .js file that I place inside the public folder in my NextJS app. I need to be able to use environment variables in that .js file, but environment variables don't seem to be available there.
I read that files in the public folder don't go through the webpack build process.
How do I customize my Next.js app so it builds an additional file inside the public folder? I found a suggestion (option 1 in the answer) on how to do it in a Vue.js app. Anyone know how to achieve something similar in Next.js?
I'm trying to create custom page in Ghost. I named file "news.hbs" for listing all the news items. Also I use webpack. Why while creating new custom page in template all the routes are matching as "news/*"? For example, while webpack generates "news.hbs" file, Ghost requires not an original path "img/header-bg.png", but an "news/img/header-bg.png". How to handle that? In main file "index.hbs" all the paths are valid, without extra folder's names.
You should modify the routes.yaml file for the routes to start working. Look at this documentation for more info: https://ghost.org/docs/api/v3/handlebars-themes/routing/
I have been going through some blog posts that tell how to customize the live search . What is not clear to me is where should I place the live-search-docs.get.config.xml file in my all-in-one-share project so that it is bootstrapped and deployed in the correct location.
Please can some one advise where the file should be placed in my all-in-one alfresco project?
From the link below
https://www.bluefishgroup.com/insights/ecm/adding-metadata-fields-to-simple-search-and-live-search-with-alfresco-5/
they suggest the search query customization file to be placed under
These files can now be modified to add additional metadata fields as
needed. Once the files have been updated, they should be deployed to
the ‘extensions’ directory so that they will override the out of the
box configuration. If you are deploying your code as a custom AMP
file, the files should target the following directory:
tomcat/webapps/alfresco/WEB-INF/classes/alfresco/extension/templates/webscripts/org/alfresco/slingshot/search
if my file needs to end up in the above path in my WAR, where exactly should I place the search file in my all-in-one alfresco project so that its deployed to the above folder? I would like this to be bootstrapped with my all in one project. I tried putting the file under src/main/resources/alfresco/site-webscripts with the remaining path for the file but that did not work.
Thanks
The easiest way is to create a copy of that file in:
my-all-in-one-project-platform-jar/src/main/resources/alfresco/extension/templates/webscripts/org/alfresco/slingshot/search/
where, of course, my-all-in-one-project-platform-jar must be substituted with the name that you have specified when the project was created with the all-in-one archetype.
The file in the extension subpath will override the corresponding OOTB files.
See Web scripts
I deployed my app in example.com/app but all my routes are broken.
Oops, looks like there's no route on the client or the server for url: "http://example.com/app/."
I can try to manually prepend to all routes /app/ subfolder but it doens't seem the right approach, especially since i use a cms package (orionjs) to generate the /admin interface, which doesn't have support to change the admin path.
Is there any way to prepend the /app folder to all routes by default?
What i find strange is that i defined ROOT_URL to http://example.com/app/ but iron router seems to ignore it. Did i skip a step ?
Unlike many web platforms (ex: php), the folder structure under your app does not map automatically to routes. If you're using iron-router you basically define what layout maps to what route. The layout can be defined in an HTML file in any folder (except under /server or /public) at any depth. You can also add any extra depth you want to any route in iron-router by prepending app/ or whatever you want to your route definitions. Your ROOT_URL should remain http://example.com/