Hello everyone I have a problem regarding nextJS routing
i have the following folder structure and its works fine for a simple scenario where a project has only one folder and this folder have one domain
but my problem occurs when a project has a folder and this folder have many subfolders
for example if i have this URL projects/1/folder1/subfolder1/subsubfolder1/.../domain1
so as you can see i don't know how many slugs i will have
how can I achieve this??
Dynamic routes can be extended to catch all paths by adding three dots (...) inside the brackets.
It means you can create a file with name [...folder].js and in that file, you can write your logic to handle the route.
You can even make it optional by including the parameter in double brackets ([[...folder]]). This allows /base, /base/a, /base/a/b, and so on.
To access folder object you can simply get it from query as
{ "folder": ["a", "b"] }
Related
I have a site using the hugo-coder theme, which has a layouts/posts folder that specifies that anything in the "posts" folder will have a blog post format.
I would like to have two different blogs in two different subdirectories, using the same layout. Is there a way to tell Hugo that the content/blog1 directory should use the same settings and layout as the content/posts directory without copying themes/hugo-coder/layouts/posts into layouts/blog1? Ideally I would avoid using symlinks, because, while convenient, I've had a decent amount of software throw weird errors when I use symlinks, so I avoid them when it's possible.
You can set the layout or type field to posts in the frontmatter of your _index.md file in content/blog1.
See this docs page for more info.
Edit: Alternatively, you could create an archetype for blog1 that automatically sets the value to posts in the frontmatter of individual posts in that section, assuming you're using hugo new blog1/postname.md to create posts for that section.
Double edit: The first suggestion didn't work. You could also create subsections within content/posts/blog1 and set the permalinks of posts in that subsection to use the last section only. That should remove the need to explicitly set the type in post frontmatter every time because each post would already have a type of posts.
In config.toml:
[permalinks]
posts = "/:sections[last]/:slug/"
You can use a partial in your templates. If you do that you WILL need the single and list file in the layouts/blog directory, but it could be an empty file referencing the partial. The layouts/posts/single.html and the layouts/blog/single.html both will then look like this:
{{ partial "singleblog.html" . }}
Compeletely DRY... and without much complexity.
I'm trying to create descriptive routes in the NextJs app however I'm struggling with the nextJs file-based routing system.
Intended route in the web is: (/posts/id/mail);
How I do it in the project:
Posts
- index.js
- [id]
- mail.js
As you can see, I don't have index.js in my [id] folder hence whenever somebody decides to go to /posts/id without '/mail' it is gonna be 404.
So basically my question is: How do I turn mail.js into index.js and make the URL stay the same (/mail at the end).
If there is no way of doing it natively with nextjs I'd also be grateful if you let me know.
catch all
This might not be the way you like it, but you might use a catch all route to hande [id] and mail.js together in one file.
E.g. if you have a file [...post].jsx and call the routes /someid/mail or just /someid you would have params.post to be an array like [ 'someid', 'mail' ] or just [ 'someid' ].
redirect
Apart from that I also didn't find any way for a folder to be a route on its own without an index file (or any other file), especially for a route like www.example.com/ (i.e. without an /index appended to it). I solved it by using some "unneeded" path /main and then redirected that to /.
As a remark:
I found that the specific route /index caused an error in some cases, that's why I've choosen /main.
I don't remember exactly, it might be dependent on if you want both routes ('/index' and '/') to be valid and point to the same file (and stay visible in the addressbar), or if only one of them should be valid and redirect to the other. Also in that case my paths came from getStaticPaths, not from files.
Is it possible to have Webpack include image assets in the build bundle without:
Using an import statement for that specific resource (which can be done with Asset Modules in Webpack 5)
Not writing it into a static HTML document as an src attribute (which can be done with HtmlWebpackPlugin)
I would have some React JSX code that reference image resources, either as a src attribute in an <img> element, or have some resource string, say var imgUrl = './Assets/img.svg', and some element later using this string as an attribute.
Currently I could manually copy the entire /Assets folder into /dist, but I would have unused resources in /Assets and would like Webpack to figure out which ones are actually used.
Oh, now I understand, and unfortunately, this is not possible.
React won't detect the value of the src of the image because it will consider it just a string, and not a path. It won't figure out which file are you talking about. The only way to use it the way you want to do it is by having those images in the public folder, which you said you didn't want to do.
In my personal opinion what I usually do with static images if the app is small, is putting them all together in a file by importing them and exporting an object with all of them together. Finally every time I want to use any image I just import that file and use whichever image I want. With this approach, at the end of the day, I'll end up with just one file (bundle). It's just an approach, there are many different ways to do this but it's relative to the case
I don't know if I understood correctly, but maybe you could require the asset inline like this...
<img src={require('./Assets/img.svg')} />
If this is not what you are looking for, maybe you can explain me more in detail... I've quite a lot of experience playing with webpack, I think I may have a solution for you
I'm using Laravel with React.jsx. My webpack.mix.js file looks like this:
const mix = require('laravel-mix');
if ( ! mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
}
mix.react('resources/js/app.js', 'public/js')
.react('resources/js/*.jsx', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
This is working exactly as I expect - any .jsx file directly in resources/js/gets compiled correctly into public/js/
What I want now, though, I'm struggling with. I want every .jsx file that in resources/js/pages/, AND every one of its subfolders, to be compliled and put into a matching folder in public/js/
So for example if I have a file resources/js/pages/a.jsx, I want it in public/js/pages/a.js, and if I have a file resources/js/pages/x/y/z/file.jsx, I of course naturally want it to appear in public/js/pages/x/y/z/file.js
I thought I could achieve this with wildcards, so I tried this:
mix.react('resources/js/pages/*/*.jsx', 'public/js')
However, that only went exactly one folder deep (eg into resources/js/pages/x/), didn't render anything directly in resources/js/pages, and put all the rendered files into public/js rather than keeping the subfolder structure.
Is there any way to achieve what I want? A sort of recursive folder/file wildcard that keeps the folder structure when putting into /public/js/?
I have a plugin installed that has its own layout overrides for different controllers. However I'm having trouble understanding the mechanism for modifying the paths.
In the plug-in controller if I tell it to use my layout
$this->layout = 'default_dashboard';
Which is in app/Views/Layout and references an image in app/webroot/default_images.
All the relative links work fine to default_images when I do this, but would like to use some of the Plugin template overides for other actions.
However if I modify the default.cpt file to include some of the images, like say a logo that is used in default_dashboard.ctp. It is unable to map to the same image location.
For example in default.ctp:
echo $this->Html->image('default_images/logo.png',array('alt' =>
'Logo','width'=>'284','height'=>'82'));
produces a path to /img/default_images/logo.png. The Plugin is configured to use the /img location, whereas I want to direct to /default_images in this case. I could make this ../default_images/logo.png, but this isn't very clean.
In addition I have js and css which is having a similar problem. Can someone please explain the mechanism for using a site-wide default.ctp so that it works with inherited plugin templates?
From hard coding the links into the template not using the Html Helper, I see that the browser's relative path is confused because of the routing. For example the first one works with the root specified, the second doesn't.
<img src="/default_images/logo.png" alt="works" width='284' height='82'>
<img src="default_images/logo.png" alt="lost" width='284' height='82'>
What's the best way to make sure that the Plugin layouts and non-plugin layouts can all find the correct path to /default_images ?
Following are the steps that you can follow to resolve relative path problem:
Create a file abc_constants.php in app\Config folder.
Include the file in app\Config\bootstrap.php
require_once(abc_constants.php);
abc_constants.php should contain:
define('HTTP_HOST', "http://" . $_SERVER['HTTP_HOST'].'/');
define('SITE_URL', HTTP_HOST.'your_app_name/');
define('IMAGE_HTTP_PATH', SITE_URL.'app/webroot/default_images/');
Use these constants in your view file accordingly.
<?php echo $this->Html->image(IMAGE_HTTP_PATH.'logo.png',array('alt' => 'Logo','width'=>'284','height'=>'82'));
It looks a bit lengthy process at first time, but once implemented, you can use these constants in Ajax calls in view files, controller's code etc.