Dmitry Sokolov
Absolute imports in Next.js
When I was working on my first project with Next.js I spent a lot of time to find how to use absolute imports. The solution turned out to be quite simple. You need to indicate this resolve option in your next.config.js file:
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
Or if you want to add absolute path only for one directory you can use alias:
module.exports = {
webpack(config) {
config.resolve.alias['components'] = path.join(__dirname, 'components');
return config;
},
}
Problem with download file in Google Chrome
I encountered such a problem when I tried to download base64 decoded file with a size over 1mb in Chrome.
I had a function like this:
export const downloadBase64File = (fileData, fileName) => {
const fileUrl = `data:application/octet-stream;base64,${fileData}`;
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
};
It worked good in FireFox but didn't work in Google Chrome. And I found the following solution:
const urlToFile = (url, filename) => {
return fetch(url)
.then((res) => {
return res.arrayBuffer();
})
.then((buf) => {
return new File([buf], filename);
});
};
export const downloadBase64File = (fileData, fileName) => {
const fileUrl = `data:application/octet-stream;base64,${fileData}`;
urlToFile(fileUrl, fileName).then((file) => {
const blob = new Blob([file], { type: 'application/octet-stream' });
const blobURL = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobURL;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
});
}
It works correctly for all browsers.
Environment variables in NEXT js
How to get env variables to your app code in NEXT.js application?
It’s not a big deal, but if you set ‘NODE_ENV’ for env in next.config.js it will not work correctly.
Anytime you will have ‘production’ (default value at build time) for any environments (staging, integration, production).
Just use another name instead ‘NODE_ENV’, for example ‘ENV’.
// next.config.js
require('dotenv').config()
module.exports = {
env: {
ENV: process.env.NODE_ENV,
},
}
It will be available in your app code
export default () => <div>{process.env.ENV}</div>
Integrate Drawer inside Stack Navigation in React Native
I wanted to use more than one navigation in a React Native app.
The documentation didn’t give a clear way to implement this.
Here is what you can do on purpose to add several types of navigation in your React Native app:
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import * as Screens from './screens/index';
import Drawer from './components/DrawerMenu';
import getDrawerWidth from './utils/scale';
const AppStackNavigator = createStackNavigator({
home: {
screen: Screens.MainScreen,
},
about: {
screen: Screens.AboutScreen,
},
});
const AppNavigator = createDrawerNavigator(
{
home: {
screen: AppStackNavigator,
},
},
{
contentComponent: Drawer,
drawerWidth: getDrawerWidth,
headerMode: 'none',
}
);
export default AppNavigator;
JS: Parsing URL
So far, I have used the indexOf operator or regular expressions to get query string values. Today I learned how to make it easier using the URLSearchParams API:
// Assuming "?post=1234&action=edit"
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
Important: Does not work in IE