- Add page metadata, optimize code, remove unnecessary dependencies.
- Use environment variables for data (e.g database credentials, API keys etc.). For environmental variables, the data can either be stored in .env.local or next.config.js.
- Do a test buld and test the production-ready app locally or on a test server.
There are 2 ways of deployment. These are,
- npm run build command to build the production files which will initiate next build as per stated in package.json.
- Produces optimized production bundles and a server-side app. Requires NodeJS server.
- Pages are pre-rendered (if possible), but NodeJS server is required for API routes, server-side pages and page revalidations.
- Re-deployment needed if code changes or you don't use revalidations and need page updates.
For this specific case, once we run "npm run build" command, the output down on the bottom is displayed.
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (6/6)
info - Finalizing page optimization
Page Size First Load JS
┌ ● / 1.97 kB 73.2 kB
├ └ css/1e9fb58c203b31c361f2.css 585 B
├ /_app 0 B 66.8 kB
├ ○ /404 3.46 kB 70.3 kB
├ λ /api/contact 0 B 66.8 kB
├ ○ /contact 3.39 kB 70.2 kB
├ └ css/dce8f9d13dbc51bac6a3.css 715 B
├ ● /posts 1.82 kB 73.1 kB
├ └ css/5c143cb7d99287f02612.css 443 B
└ ● /posts/[slug] 284 kB 355 kB
└ css/71aaee323b3ce5ce4be9.css 452 B
├ /posts/another-blog-post
└ /posts/new-blog-post
+ First Load JS shared by all 66.8 kB
├ chunks/365e2c93ee4512644b764144cea69ab374a79a06.ae833e.js 10.7 kB
├ chunks/ab991c0a337eaf832b1db71bb0078ca34bd7cb6b.37a42c.js 3.17 kB
├ chunks/framework.0c2392.js 42.1 kB
├ chunks/main.901106.js 6.32 kB
├ chunks/pages/_app.b425e1.js 3.8 kB
├ chunks/webpack.50bee0.js 751 B
└ css/d4cd8750a77b2ca7160e.css 797 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)The console output above normally highlighted "355kb" with red in the actual Linux terminal. This is an indication that we might have heavy dependencies installed for the post details page. We can still deploy that but it is a clearly indication that the situation is not optimal.
/posts/[slug] 284 kB 355 kB
Much lighter versions of codes can be used inside PostContent.js.
- next export command. This has to be added to the "scripts" section of the package.json. The entry should be written as "export": "next export".
- Produces 100% static app (HTML, CSS, JS): No NodeJS server required.
- Does not work if your app uses API routes, server-side pages or wants to use page revalidations.
- Re-deployment needed for all code and content changes.
- Once npm run build is conducted to create production files under ./.next folder, we can run npm start to see how the production server will behave like.
- Deployment can be done using Vercel. For NextJS apps, Vercel is a good choice.
If you are using npm package, use the following instructions:
- Create .env.local file to the root directory of the project. The only environmental variable for the file is MONGODB_ATLAS_LINK. Once the database is created, you have to find the link to "Connect your application". Then add it into the .env.local file. An example of the content of env.local file is given down below.
For more information you can refer to MongoDB Atlas Documentation.
MONGODB_ATLAS_LINK=mongodb+srv://<username>:<password>@some-blog.8hxik6m.mongodb.net/<databaseName>?retryWrites=true&w=majority
Alternatively, you can use next.config.js to store environmental variables. The file has to be created on root directory of the project. Then the content should be like,
// Environmental-Variable-Storing-in-next.config.js-File
// Used if we use the export command
// const { PHASE_EXPORT } = require('next/constants');
// Used if we run 'npm run dev'
const { PHASE_DEVELOPMENT_SERVER} = require('next/constants');
// Used if we run 'npm run build'
// const { PHASE_PRODUCTION_BUILD } = require('next/constants');
// Used after we build, for the server side code once our server is up and running
const { PHASE_PRODUCTION_SERVER } = require('next/constants');
module.exports = (phase) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
env: {
mongodb_username: 'testName',
mongodb_password: 'testPassword',
mongodb_clustername: 'testCluster',
mongodb_database: 'testDatabase'
}
};
}
return {
env: {
mongodb_username: 'aras',
mongodb_password: 'realPassword',
mongodb_clustername: 'realCluster',
mongodb_database: 'realDatabase'
}
};
};After that you can use it in a component file like
const nextConfigJsEnvVariables = `${process.env.mongodb_username}${process.env.mongodb_password}${process.env.mongodb_clustername}${process.env.mongodb_database}`;-
Run npm i to install dependencies.
-
Run npm run build to optimize the project for production.
-
Once the environmental variable is created, run npm start to start the server.
-
If you are in development environment, do not forget to restart server once you create the .env.local file.
The npm package name to read from an md file and convert it to an HTML is react-markdown. Make sure to install version 5.0.3. npm i react-markdown@5.0.3
The npm package to do it is gray-matter.
As stated in the keyword, if we search we can see gray-matter npm library has a property for ReactMarkdown component to pass Image component of NextJS so that we don't use classic image tag of HTML for better optimization.
react-syntax-higlighter npm library is useful if you have a code snippet in your markdown file. The react-syntax-higlighter npm library will be used to style the code snippet when it is transformed into html.
Front end data sending. This section is for contact info sending to the database. It covers all the error handling and user notification about if the data is already sent or if there has been an error. The data is also verified if the email and message sent correctly.
Backend data sending. This section is for contact info sending to the database. It covers all the error handling about if the data is already sent or if there has been an error. The data is also verified if the email and message sent correctly.
Environmental variables can be stored inside .env.local in the root directory of a NextJS project, as well as inside next.config.js