On our Next.js website we want to add 'Edit this page on Repo' type links in the footer but we've not been able to retrieve the exact path for the current file....
We tried:
const { router } = useRouter()
<a href={`${process.env.REPO_URL}/pages${router.pathname}.js`}>Edit this page</a>
However this doesn't work for pages that use index.js or if the page is using a different extension: tsx, mdx, etc...
We tried using NodeJs itself with:
import path from 'path'
const filepath = path.basename(__filename)
but that doesn't return the directory... and if we try:
const filepath = path.dirname(__filename) + path.basename(__filename)
We just get /index.js so seems it treats it all as root...
How can we get the proper filename for a page in Next?
e.g.
/pages/test/random.mdx
/pages/test/index.js
/pages/test/test/another.tsx
Related
Im new to nextjs, and Im checking if it will be good for the app that will have pretty complex and messy internal navigation. Just checked their documentation and I see that they recommend usage
of Link component like this <Link href="/your_path">Path</Link>. A bit scary is that I have to provide 'your_path' as a string so every time i change page file name I have to manually update code that redirects to this page. Is there any solution that allows me to define routing on my own so I can write something like (pseudocode)
routes = [
...
{
page : 'page_name',
path : 'path_to_page'
}
...
]
So instead of using string I can do <Link href="{route.path}">Path</Link> or Im condemned to use this file-system based router with all consequences?
The simple answer is yes!
When you want to change a user route in NextJs you have 2 options,
The first is with the <Link> Element that you can specify a href to where it directs.
And you also have a useRouter hook for more complex routing for example if the user does an action that requires moving him into a different route you can do it internally in your handlers.
For more information about useRouter hook.
What I usually do is storing my routes in an object
const ROUTES = {
HOME: "/",
ABOUT: "/about"
}
and wherever you call routes you just use the object so F.E
With Link tag
<Link href={ROUTES.ABOUT}>ABOUT PAGE</Link>`
with useRouter hook
// Inside a React Component
const router = useRouter();
const handleNavigateToAbout = () => {
router.push(ROUTES.ABOUT);
}
return (
// SOME JSX
<button onClick={handleNavigateToAbout}> Go to about page! </button>
)
I'm trying to create a nested route inside my nextjs project, but i'm receiving a 404 page not found when trying to request the page.
I have a route named /dashboard/repository/blender where blender is a dynamic name that the user can input and that works fine.
But the next step is then to create a subpage for that dynamic route which is named tags, and that's where I receive the 404. (/dashboard/repository/blender/tags)
Here's a screenshot of what i've tried to achieve the tags nested routing
Secondly I have also tried doing the following
What can I do to achieve this ?
Try that structure please
dashboard (folder)
-repository (folder)
--[blender] (folder)
----tags.tsx (file)
example urls
/dashboard/repository/blender/tags
/dashboard/repository/surrender/tags
...
In your component, you can get it like below
tags.tsx
import { useRouter } from 'next/router'
const C = () => {
const router = useRouter()
const { blender } = router.query;
console.log(blender)
}
Solved it with
- /dashboard/repository/[repository]/index.js
- /dashboard/repository/[repository]/tags.js
I have a Next.js page, where the pages are statically generated (using next export). It's a dynamic route, but I will only fetch data on the client after the initial page load (in a useEffect).
The path is something like: /pages/foo/[id].tsx. This is in fact the only route which is going to exist.
My problem is:
If I access the URL directly (e.g. typing in https://mysite.fake/foo/1337 into the URL bar) I get a 404.
If I navigate to that route using a <Link /> it does work as expected
If I then reload the page, I get a 404 again.
On local dev, it works fine. The problem only exists when deployed.
The page in question is using the router.query, but I have the same problem with a completely static page (e.g. just /pages/bar/baz.tsx).
Example:
export const Home: NextPage = () => {
const router = useRouter()
const { id } = router.query
const headerText = id ? `Hello ${id.toString()}` : ''
// in a later iteration, I will use the query id to fetch data in a useEffect
return <h1>{headerText}</h1>
}
As far as I understand from the Next.js documentation on dynamic routing and data fetching this should be possible to do.
My next.config.js is very bare:
/** #type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
}
What am I doing wrong?
I am trying to create localized routes with optional first param like /lang?/../../, but without a custom server.
From 9.5 NextJS has this option dynamic optionall parameters, if you set the folder or a file with a name:
[[...param]]. I did that.
The problem is that, i have other routes and I want all of them to be with that lang prefix, ut optional with default language, if that lang is not provided
I have a folder [[...lang]] with a file index.js, with simple function component just for testing. Now optional parameter works for the home page / and /en, but I have other files, which I want to be with that optional lang. For the example, I have about.js and I want to access it via /en/about and /about.
I can't put about.js inside [[...lang]], because, I am getting an error:
Failed to reload dynamic routes: Error: Catch-all must be the last part of the URL.
I know what it says and why is that, but I have a fixed collection of languages ['en', 'fr'] and I can check is there a lang.
Is there a way, without a custom server to use optionally a dynamic first part of the path, like
/en/about and /about ?
I think you are talking about this feature. Have a look on this https://nextjs.org/blog/next-9-5#support-for-rewrites-redirects-and-headers
To extend the answer from #Vibhav, in next.config.js:
const nextConfig = {
async rewrites(){
return [
// URLs without a base route lang param like /my-page
{
source: '/',
destination: '/'
},
// URLs with a base route lang param like /en/my-page
{
source: '/:lang*/:page*',
destination: '/:page*'
},
// URLs `/en/post/post_id`
{
source: '/:lang/:path/:page',
destination: '/:path/:page'
},
]
}
};
module.exports = withBundleAnalyzer(nextConfig);
all pages are in the pages folder. Not the best solution for now, because it works in a deep up to like /pages/another-folder/file.
You can even get the lang param in your pages or _app.js:
....
const router = useRouter();
if(router.query.lang){
pageProps.lang = router.query.lang;
}
console.log(pageProps.lang);
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
For URL - /en/my-page, router.query.lang will be equal to en.
For URL - /my-page, router.query.lang will be undefined, but you can set a default lang.
I need to add the Static HTML file in Kibana dashboard.where i can hold my HTML file in Kibana.
Note:Kibana version 5.6.3
I come across some kibana plugin like Kibana-html-plugin,kibana5-html-plugin , but it wont support for my kibana version 5.6.3.
i already change the package.json file but it wont help.
is there any otherway to do
import marked from 'marked';
import uiModules from 'ui/modules';
import 'angular-sanitize';
marked.setOptions({
gfm: true, // Github-flavored markdown
sanitize: true // Sanitize HTML tags
});
const module = uiModules.get('kibana/markdown_vis', ['kibana']);
module.controller('KbnMarkdownVisController', function ($scope, $sce) {
$scope.$watch('vis.params.markdown', function (html) {
if (!html) return;
$scope.html = $sce.trustAsHtml(html);
});
});
at last, I found the solution.
Paste the above code in kibana/src/core_plugins/markdown_vis/public/markdown_vis_controller.js