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.
Related
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?
Hi i like to add i18n support to my nextJs app without any routing. Any existing solutions I’ve found using some sort of routing.
So what i need is to access request headers ('Accept-Language' header to be spesific) in _document.tsx than I will set html lang from it. Than I read it from Js and return proper language objects both initial ssr and csr. If I do it without this I get error like Text content did not match. Server: …
So far I’ve tried to retrieve it from getInitialProps in _document.tsx but it seems it is always null. I also tried retrieving header from middleware and than rewriting url with adding lang to search params. But I also couldn’t manage to retrieve it from _document.tsx either.
How can I provide this functionality to my app?
You could try to use react-intl-universal with next.js.
You could use intl.determineLocale to get the language, then use it to intl.init. It has nothing to do with routing.
Here is an example integrating react-intl-universal with NextJS
Context
We have 2 distinct React JS applications both deployed behind a proxy.
The proxy serves one app (let's call it the home page) on the root / location. It serves the other on a subpath, e.g. /application-a/. Both are therefore on the same domain, e.g. https://my-site.com/ and https://my-site.com/application-a/
This works great if I open 2 new browser windows and navigate 1 directly to / and the other directly to /application-a/.
The problem comes when I might want to use a HTML a tag inside the root path application (home page) and link this to the application running at /application-a/ subpath using a relative href.
In this case I believe that the router kicks in and wants this to be route in the local app. I want to try to "escape" or "breakout" of the react router.
Possible Solutions
I think if the anchor tag href in the root app has a target attribute value of _blank this works ok - but is undesirable as it forces a new tab to be loaded.
If I use an absolute URL for the href value then I think it will "escape" the SPA and access the new page in the same tab. Sounds great - but now I have to use absolute URL's making the code less portable between dev/staging/live etc.
Explicitly put a matching route in the router for /application-a/ and programatically change the window.location? I could see this might work but feels messy to me.
Question
Isn't there a way I can use good old fashioned anchor tags and maybe provided some type of attribute which tells the react router to "leave me alone" and let me behave like a "regular" anchor in a static HTML/non-SPA/non-React JS page. If not, any other advice appreciated.
Similar unresolved question: Navigating out of a react-router single page application on the same host
Can you use a HashRouter instead? https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
URLs won't be "pretty", but it should work.
Alternatively, you could maybe redirect the user to the other app if the current urls doesn't match with any route definition, e.g.:
<Route render={() => (<Redirect to="http:/full-url-to/other-app" />)}/>
after all your other route definitions, so that it matches only when no other route matches.
About portability between different environments (staging, live, ...), consider you could also use Webpack DefinePlugin to set a variable at build time, so you can pass the base URL dynamically.
I have a backend using express to serve a static directory, to the path /, in which is contained a single page frontend. This backend also serves an API REST.
The frontend is built in React, and uses react-router to route the user from the different views of the web application.
If my react-router have two entries, let say /app and /config,
how can I redirect the client to that view of the application, if the user enters directly the URL in the web browser's address bar?
Right now, if I do that, Express gets the request and obviously returns a 404 message, as the single page is served to / path.
A simple way to resolve that is to always (even on 404s) send to user the index.html in your express route handlers.
See: https://stackoverflow.com/a/25499007/2624575
However, you need to take care of some things:
1) Your React Router code should start to handle 404s: https://stackoverflow.com/a/37491381/2624575
2) You need to handle correctly the path to your assets (icons, css, js, etc), otherwise you'll send the same index.html to those kind of resources (which will make your page render incorrectly)
3) Make sure that react-router is using browserHistory (the history that doesn't use hashes #), This way React will be able to render your routes correctly
Hope it helps!
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).