I have a NextJS app and am using Storybook to develop my components.
After looking through all the NextJS routing documentation, I can't find a way to route to my storybook from within NextJS. Only access pages within the /pages directory.
What I would like to do it to have my StoryBook available at /styleguide from within my Next app thought all environments.
Is someone able to help?
Short answer: No, you can not do that.
But you can always redirect the url /styleguide to another domain where Storybook is running, for example styleguide.example.com. Here, an example based on the official documentation:
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/styleguide',
destination: 'https://styleguide.example.com',
permanent: true,
},
]
},
}
If your URL's would have any parameters for it's origin that you would want to append to the redirects destination, NextJS provides a feature to do just that.
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/styleguide/:pageId/:slug',
destination: 'https://styleguide.example.com/:pageId/:slug',
permanent: true,
},
]
},
}
Related
I have Multi Zone setup between two applications:
Home App
Blog App
When I am on a page within the Blog app and try to link back to the Home app, either using Link or router.push("/"), it takes me to the base path of the Blog app.
Inside the next.config.js, I've set it up as following:
/** #type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['#workflow/shared-core']);
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
externalDir: true
},
basePath: '/blog',
rewrites: async () => {
return [
{
source: "/",
destination: "http://localhost:5001",
basePath: false
}
]
}
}
module.exports = withTM(nextConfig)
My understanding was that when a rewrite is setup with the basePath set to false, it would fallback completely the URL in the destination property.
Any ideas?
Unfortunately you can't use next router to jump between multi zones. Each new multi zone is basically a new next app with its own instance of router, so for your blog app the base route would be /blog/. To jump to the other app you will have to use either an <a href="#"> tag with href attribute or manually change the window.location.href = .... pointing to the route you want. For example if base path is '/account' and you want to navigate to that from '/blog', you will have to do window.location.href = '/account'.
My problem is : I have pages/blog.js file in my project. I did localized urls like down below in the next.config.js file.
i18n:{
locales:["tr","en"],
defaultLocale:"tr"
},
async rewrites(){
return [
{
"source":"/tr/makaleler",
"destination":"/blog",
"locale":false
},
{
"source":"/en/articles",
"destination":"/blog",
"locale":false
}
]
}
It works. But problems is ; I can still access with this localhost:3000/blog. I want to make it only accessible with localhost:3000/makaleler or localhost:3000/en/articles.
Is there any way to achieve this? I have read "nextjs" documentation bu couldn't find anything useful.
Essentially what you want is not possible, The reason is if you restrict access to localhost:3000/blog by any means, then your rewrites will stop working as well.
What you probably need is redirects from localhost:3000/blog to the desired locale for your users. You can leverage Accept-Language header for example:
async redirects() {
return [
{
source: '/blog',
has: [
{
type: 'header',
key: 'accept-language',
// header starts with tr
value: 'tr(.*)',
},
],
destination: '/tr/makaleler',
permanent: false,
},
{
source: '/blog',
has: [
{
type: 'header',
key: 'accept-language',
// header does not start with tr
value: '((?!tr$).*)',
},
],
destination: '/en/articles',
permanent: false,
},
]
}
You should use Next.js Middleware in version 12.2 if you want to implement complex redirect logic based on language (or anything). You can find a quick tutorial by Vercel in Youtube here: https://youtu.be/j7rPSS9Ovsw?t=296
I'm moving from a wordpress site to a new, shiny nextjs site. However, I have hundreds of redirects and I don't want to put them all in the nextjs config file. I like things clean and tidy. I searched around for awhile and didn't find any results on how to do this. Any suggestions?
You need to import it via require, tho remember that u also need to export it as module, so ex.:
const redirectsArray = [
{ source: "/about", destination: "/", permanent: true },
];
async function redirects() {
return redirectsArray;
}
module.exports = {
redirects,
};
and then
const { redirects } = require("./redirects.js");
I got it working while module exporting it as an array instead of an object in the redirects.js
module.exports = redirects
And then add it to the next.config.js like so
async redirects() {
return redirects
}
I'd like to show two different pages at '/' depending on the hostname (the value for req.hostname). This is because I have a subdomain xxx.mydomain.com that needs to show just one page at the root URL. The idea is to have a CNAME for the subdomain that points to the same server as www. I'm using next version 11.1.2 .
My homepage (/pages/index.js) uses getStaticProps to get data for the page with a revalidate interval of 2 seconds. The page on the production branch works great currently without any rewriting.
I tried using the rewrites option in next.config.js and was able to use this to rewrite all other routes, but rewriting with source: '/' did not do anything. If the source was any other page it worked perfectly. This is pretty much what the next.config.js file looked liken when I tried the rewrite:
const withFonts = require('next-fonts');
const withTM = require('next-transpile-modules')(['#cal-frontends/shared']);
require('dotenv').config({ path: '../../.env' });
module.exports = withTM(withFonts({
async rewrites() {
return [
{
source: '/', // this one still showed the homepage at '/'
destination: '/mission',
},
{
source: '/foo', // this one showed the contact page at '/foo'
destination: '/contact',
},
]
},
webpack(config, options) {
return config;
},
}));
I tried many strategies, including this kind of configuration in server.js
server.get('/',function(req,res){
console.log('trying to redirect', )
console.log('req.hostname', req.hostname)
if (req.hostname === 'mission.mydomain.com') {
console.log('this should show mission', )
return app.render(req, res, '/mission', {})
} else {
handle(req, res);
}
});
This unfortunately did not seem to override the static caching that happens with getStaticProps – you will only see the correct page for the hostname if you load and then reload after it revalidates.
Is there an elegant way to do this?
I have a Next.js API route which needs to access a local file, but __dirname is not defined when I use it within an API route.
Is it possible to get the current directory from within a Next route?
In order to access the root directory, or any directory for that matter, you can used next.config.js to set a webpack alias. Example:
// Inside next.config.js
module.exports = {
webpack: (config) => {
config.resolve.alias = {
...config.resolve.alias,
'~': __dirname,
};
}
Now ~, when used to path to resources, will resolve to the value of __dirname.
Alternatively you could use next.js's client env if you're on next.js 8+. Example:
// inside next.config.js
module.exports = {
env: {
ROOT: __dirname,
}
}
Now using process.env.ROOT gives you access to __dirname.