I want to do three things in my application, but I’m not figuring out how I could do that using Next.js router.
The default URL of the application should be 'https://localhost:3000/en'
It should also be possible to have 'https://localhost:3000/es' as a valid URL
Anything different than '/es' should redirect to '/en'
(This parameter will influence on the displayed language of the application.)
Considering those three points, should I create inside pages folder a new folder called language and put my index.tsx file and all the others routes that I have?
Example here
If I do that, what are the rules that I should create on my next.config.js to match with the criteria that I listed above? If not, what could be another approach to solve this?
Related
I want to build a react application where there will be two types of UI, one for admin and other for user. All the files included in header and footer will be separate. how can I achieve this?
Approach 1
Creating two separate application for admin and user like
example.com for user and admin.example.com
So that I can include all the css and js files of respective design in index.html
Approach 2
Integrating in one application where url will be example.com for user and example.com/admin for admin.
but then my question is where will the asset file will in included for both user and admin where the respective template will be created.
Please help and pardon me if the question framing is not correct.
The second approach looks better to me.
Where to include assets and where to create the template?
Have all the Components (admin + user components)in the Components folder, and in App.js, while defining the routing, provide components to routes accordingly. For example:
for path="/", it should provide component <UserHome/>
for path="/admin/", it should provide <AdminHome/>
Hope that answers your question.
Both these are equally good.
Would recommend method 2 if there is any common data or function between them
I'm attempting to create a route in Next.js that follows a format like:
localhost:3000/post-SLUG
By creating a file with the name:
/pages/post-[slug].js
When I navigate to an example like localhost:3000/post-example I get a 404. Is it possible to do this type of routing? I realize that this is probably not the best URL setup, but I'm trying to match URLs from an already deployed site as a part of a migration to Next.
It's not possible to do it with Next.js routing system because in order to be dynamic the part of URL must match this regular expression:
/\/\[[^/]+?\](?=\/|$)/
So the route have to be /post/[slug]/.
The /pages/post-[slug].js would be accessible as a static route http://localhost:3000/post-[slug].
You can utilize a Custom Server to create this kind of routes.
I notice that a lot of projects name their react components with uppercase class names and lowercase filenames. Why would that be different?
I believe that would not be the best practice. The filename should be the same as the React component's, and should be written in PascalCase.
For instance: Navigation.jsx exports Navigation
Further reading about naming conventions:
Stackoverflow question
Bonus: Structuring files and folders in a React project:
Yay, Hackernoon again!
Alexis Mangin's post
You probably don't need to read this if you don't use redux, but it has a good comparison between function-first and feature-first grouping techniques. Alex Moldovan's post
Edit: From nextjs official website
Next.js will serve each file in /pages under a pathname matching the
filename.
For example, /pages/about.js is served at site.com/about.
Therefore in case of Nextjs, they wanted to separate component and page files as page files are used for routing.
I think is that the same as all javascript frameworks, that should be
Presentational and Container components are kept at src/components
Group components by module/feature.
Keep generic components inside src/components/UI Keep screens simple,
with minimum structure and code.
List item Group screens accordingly to route
definition. For a route /user/list we would have a screen located at
/src/screens/User/List.jsx.
something like this Finally, our application would be structured like that
here is a valuable resource to take as reference
I have an app that has tons of routes and controllers. Our app allows people to create projects and manage them. All of the routes except user related ones requires the project id, currently we store the project id in cookie but plan to move it to urls so the scheme will become /PROJECT_ID/project-related-endpoint from /project-related-endpoint
I basically need to add a prefix to all my routes that represents the current project id but it requires too much work. All of the routes need to change, all redirection calls ($location.path()) needs to be re-written so I'm looking for a solid way to solve this problem. Should I override $location.path() that adds the prefix automatically and change the routes manually or is there any better way to handle this problem?
I am planning to rewrite my site into CakePHP and after having spent a full week on learning it, I am still not sure how to do good custom routing in CakePHP.
This is what I want:
Keep the current url structure in www.domain.tld/en/dragons.html, or use a www.domain.tld/en/dragons, but not www.domain.tld/en/nodes/dragons.html. And also be able to use controllers on a similar path structure.
There are about 100 static pages on the entire site. I have read into multi-language routing and I think I can do it. I can also make /en/* or /en/:slug route via a PagesControler or a self-written NodesController.
My problem is that I would like to be able to mix and match url's with and without controllers, so actually what I want is that it checks if a :slug is part of the slug-list, there should still be the option to use that url with a controller.
I have created routes for both /en/contact and /en/:slugid, but it seems all queries were routed to my NodesController, even while I explicitly said that /en/contact should be routed to the ContactsController.
How can I instruct Cakephp to keep my current dictorary structure? I read the routes part of the Cakephp book, but it was extremely short and made me a little unsure about the possibility of such routing. If necessary, I'll just write a php-code that prints all routes for all slugs, so I can still write controller-routes with a similar path structure.
If a file exists in webroot (ie. app/webroot/static.html), the .htaccess file will tell Apache to serve that file before loading the CakePHP framework for requests to www.example.com/static.html.
Cake loads routes in a top-down order and will use the first matching route to handle a request. In your case, /en/contact should be above /en/:slugid, else the slugid rule will always win.
If CakePHP's routing does not accomplish what you are after, you can always implement a custom route class (book / example).